14 (H5*) JS第4天 函数、作用域、预解析

目录

1：函数的其他定义

2：函数作为参数

3：函数作为返回值

4：作用域

5：作用域链

6：预解析

7：预解析分段

复习

<script>

    /*
    * 复习:
    * 函数:把一些重复的代码封装在一个地方,在需要的时候直接调用这个地方的代码就可以了
    *
    * 函数作用:代码重用
    *
    * 函数的参数:
    * 1.形参:函数定义的时候,函数名字后面的小括号里的变量
    * 2.实参:函数调用的时候,函数名字后面的小括号里的变量或者值
    *
    * 返回值:
    * 函数中有return，函数有返回值
    * 函数中没有return,函数没有返回值
    * 没有明确返回值:函数中没有return或者return后面没有任何内容
    * 如果一个函数没有明确的返回值,接收这个函数,结果是undefined
    *
    * 无参数无返回值的函数
    * 无参数有返回值的函数
    * 有参数无返回值的函数
    * 有参数有返回值的函数
    *
    * arguments----->可以获取函数调用的时候,传入的实参的个数
    * arguments是一个对象,是一个伪数组
    * arguments.length--->是实参的个数
    * arguments[索引]---->实参的值
    *
    * 作用域:变量的使用范围
    * 全局作用域:全局变量在任何位置都可以使用的范围
    * 局部作用域:局部变量只能在某个地方使用---函数内
    * 作用域链:在一个函数中使用一个变量,先在该函数中搜索这个变量,找到了则使用,找不到则继续向外面找这个变量,找到则使用,一直找到全局作用域,找不到则是undefined
    * 全局变量:只要是在函数外面声明的变量都可以看成或者是理解成是全局变量
    * 局部变量:在函数中定义的变量
    *
    * 预解析:在执行代码之前做的事情
    * 变量的声明和函数的声明被提前了,变量和函数的声明会提升到当前所在的作用域的最上面
    * 函数中的变量声明,会提升到该函数的作用域的最上面(里面)
    * 如果有多对的script标签都有相同名字的函数,预解析的时候是分段的,互不影响
    *
    * */
  </script>

内容

1：函数的其他定义

<script>

    /*
     * 命名函数:函数如果有名字,就是命名函数
     *
     * 匿名函数:函数如果没有名字,就是匿名函数
     *
     * 函数的另一种定义方式
     * 函数表达式:
     * 把一个函数给一个变量,此时形成了函数表达式
     * var 变量=匿名函数;
     * 例子:
     * var f1=function (){
     *
     * };
     * 如果是函数表达式,那么此时前面的变量中存储的就是一个函数,而这个变量就相当于是一个函数,就可以直接加小括号调用了
     * f1();
     *
     * 注意:
     * 函数表达式后面,赋值结束后,要加分号
     *
     *
     *
     * 函数定义:
     * 1. 函数声明--函数定义
     * function 函数名(){
     *     函数体
     * }
     *
     * */

    //    var f1=function(){console.log("阿涅哈斯诶呦");};
    //    f1();

    //函数的自调用,没有名字,调用---声明的同时,直接调用
    //一次性的--------
    //    (function(){console.log("阿涅哈斯诶呦");})();
    //    (function(){console.log("嘎嘎")})();

    //
    //    function f1() {
    //      console.log("哈哈,我又变帅了");
    //    }
    //    f1();//函数调用
    //    //如果一个函数能够调用:  函数的代码();
    //
    //    //函数表达式
    //    var f2 = function () {
    //      console.log("哈哈,真的好帅哦");
    //    };
    //    //匿名函数不能直接调用
    //    f2();
    //
    //
    //    var f4 = function () {
    //      console.log("我是一个函数");
    //    };
    //    f4();
    //
    //
    //
    //    var num=10;

    //函数声明
    function f1() {
      console.log("助教好帅哦");
    }
    f1();
    function f1() {
      console.log("小苏好猥琐哦");
    }
    f1();

    //函数表达式
    var f2 = function () {
      console.log("助教没有小杨帅");
    };
    f2();
    f2 = function () {
      console.log("小杨真的很帅");
    };
    f2();
    //函数自调用
    (function () {
      console.log("阿涅哈斯诶呦");
    })();
    (function () {
      console.log("嘎嘎")
    })();

    //    var num=10;
    //    console.log(num);
    //    num=100;
    //    console.log(num);
  </script>

2：函数作为参数

  <script>

    //函数可以作为参数使用,如果一个函数作为参数,那么我们说这个参数(函数)可以叫回调函数
    //只要是看到一个函数作为参数使用了,那就是回调函数

    function sayHi(fn) {
      console.log("您好啊");
      fn();//fn此时应该是一个函数
    }
    function suSay() {
      console.log("我猥琐,我邪恶,我龌龊,小苏说");
    }

    sayHi(suSay);

//    function f1(x,y) {
//      console.log(x+y);
//    }
//    f1(10,20);
//
//    function f2(x,y) {
//      console.log(x+y);
//    }
//    f2("小苏","猥琐");
//    function f3(x) {
//      console.log(x);
//    }
//    f3(true);

//函数声明,fn是变量,fn是参数,
//    function f1(fn) {
//      fn();//函数调用---说明fn这个变量中存储的是一个函数
//    }
//
//    function f2() {
//      console.log("哦,这也可以");
//    }
//    f1(f2);

//    var f1=function () {
//      console.log("哈哈");
//    };

  </script>

3：函数作为返回值

<script>
    //结论:函数是可以作为返回值使用的:
    function f1() {
      console.log("f1函数调用了");
      return function () {
        console.log("这是一个函数");
      };
    }

    var ff=f1();//调用
    //ff就是一个函数了
    ff();

  </script>

4：作用域

<script>
    //作用域:使用范围
    /*
    *
    * 全局变量:声明的变量是使用var声明的,那么这个变量就是全局变量,全局变量可以在页面的任何位置使用
    * 除了函数以外,其他的任何位置定义的变量都是全局变量
    * 局部变量:在函数内部定义的变量,是局部变量,外面不能使用
    * 全局变量,如果页面不关闭,那么就不会释放,就会占空间,消耗内存
    *
    * 全局作用域:全局变量的使用范围
    * 局部作用域:局部变量的使用范围
    *
    * 块级作用域:一对大括号就可以看成是一块,在这块区域中定义的变量,只能在这个区域中使用,但是在js中在这个块级作用域中定义的变量,外面也能使用;
    * 说明:js没有块级作用域,只有函数除外
    *
    * 隐式全局变量:声明的变量没有var,就叫隐式全局变量
    * 全局变量是不能被删除的,隐式全局变量是可以被删除的
    * 定义变量使用var是不会被删除的,没有var是可以删除的
    *
    *
    * */

//    function f1() {
//      number=1000;//是隐式全局变量
//    }
//    f1();
//    console.log(number);

//    var num1=10;
//    num2=20;
//    delete num1;//把num1删除了
//    delete num2;//把num2删除了
//    console.log(typeof num1);
//    console.log(num1+10);
//    console.log(typeof num2);

//    num=100;
//    console.log(num);

    //扩展:隐式

//    function f1() {
//      var num=100;
//      num+=10;
//    }
//    f1();//这个函数结束之后

//    {
//      var num=10;
//      console.log(num);//10
//    }
//    console.log(num);

//    if(true){
//      var num=10;
//    }
//    console.log(num);
//    for(var i=0;i<5;i++){
//      var number=20;
//    }
//    console.log(number);

//    var i=0;
//    while (i<5){
//      var num=100;
//      i++;
//    }
//    console.log(num);

//    function f1() {
//      var num=10;
//    }
//    f1();
//    console.log(num);

//    var num=10;
//    console.log(num);//10
  </script>

5：作用域链

 <script>

    var num=10;
    function f1() {
      var num=20;
      function f2() {
        var num=30;
        function f3() {
          var num=50;
          console.log(num);
        }
        f3();
      }
      f2();
    }
    f1();
  </script>

6：预解析

<script>
    //预解析:提前解析代码
    /*
    *
    * 预解析:就是在解析代码之前
    * 预解析做什么事?
    * 把变量的声明提前了----提前到当前所在的作用域的最上面
    * 函数的声明也会被提前---提前到当前所在的作用域的最上面
    *
    *
    * */

    //函数调用的时候,把会函数的声明提升到作用域的上面
//    f1();//调用
//    var num=20;//这个变量的声明会提升到变量使用之前
//    function f1() {
//      console.log(num);
//      //var num=10;
//    }

//    function f1() {
//      console.log("小苏好猥琐");
//    }
//
//
//    f1();
//    function f1() {
//      console.log("小苏没有助教猥琐");
//    }
//    f1();

    //把变量的声明提前了
//    var num;
//    console.log(num);
//    num=10;
//    function f1() {
//      console.log("哈哈,助教好猥琐哦");
//    }
    //f1();//报错

  </script>

7:  预解析分段

  <script>
    //预解析中,变量的提升,只会在当前的作用域中提升,提前到当前的作用域的最上面
    //函数中的变量只会提前到函数的作用域中的最前面,不会出去
    //预解析会分段(多对的script标签中函数重名,预解析的时候不会冲突)

//    function f1() {
//
//      console.log(num);//undefined
//      var num=10;
//    }
//    f1();
//    console.log(num);//

    function f1() {
      console.log("哈哈");
    }

  </script>

注意