美文网首页
JS函数作用域链

JS函数作用域链

作者: l_meng | 来源:发表于2017-03-20 09:31 被阅读0次

    1.函数声明和函数表达式

    函数声明和函数表达式都可以声明函数,但使用函数声明的方法,声明不必放在调用前;使用函数表达式,声明需要在调用前,可以省略函数名。
    例:

     function sayHello(){
        console.log('hello')
      } 
    //函数声明
    
    var sayHello = function(){
        console.log('hello');
      }
    //函数表达式
    

    2.变量与函数的声明前置

    在一个作用域下,var声明的变量和function声明的函数会前置,声明的语句会优先执行。

    3.arguments 对象

    Arguments是个类似数组但不是数组的对象,说他类似数组是因为其具备数组相同的访问性质及方式,能够由arguments[n]来访问对应的单个参数的值,并拥有数组长度属性length。还有就是arguments对象存储的是实际 传递给函数的参数,而不局限于函数声明所定义的参数列表,而且不能显式创建 arguments 对象。

    4.函数的"重载"怎样实现

    JavaScript不支持函数的重载,即不能够定义同样的函数然后通过编译器去根据不同的参数执行不同的函数。但可以在函数内部定义多种模式,根据传进来的参数信息进行匹配。

    5.立即执行函数表达式

    立即执行函数表达式是一种可以使函数在被定义后立即执行的一种写法,在javascript里,括号内部不能包含语句,当解析器对代码进行解释的时候,先碰到了(),然后碰到function关键字就会自动将()里面的代码识别为函数表达式而不是函数声明。例如下面的代码:

    (function(){
      var a  = 1;
    })()
    console.log(a); //undefined
    

    立即执行函数表达式的作用:一是不必为函数命名,避免了污染全局变量;二是IIFE内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。避免了污染全局变量。

    6.求n!,用递归来实现

    function factor(n){
      if(n === 1) {
        return 1
      }
      return n * factor(n-1)
    }
    
    var result=factor(5);
    console.log(result)
    

    7.以下代码输出什么?

        function getInfo(name, age, sex){
            console.log('name:',name);
            console.log('age:', age);
            console.log('sex:', sex);
            console.log(arguments);
            arguments[0] = 'valley';
            console.log('name', name);
        }
    
    getInfo('饥人谷', 2, '男'); //结果:name: 饥人谷 age: 2 sex: 男 ["饥人谷", 2, "男"]  name valley
    getInfo('小谷', 3);     //结果:name:小谷 age:3 undefined ["小谷", 3] name vally
    getInfo('男');  //结果: name:男 undefined undefined ["男"] name vally
    

    8. 写一个函数,返回平方和

       function sumOfSquares(){
             var sum=0;
             for(var i=0;i<arguments.length;i++){
                   sum=sun+arguments[i]*arguments[i]
                   return sum;
             }
       }
       var result = sumOfSquares(2,3,4)
       var result2 = sumOfSquares(1,3)
       console.log(result)  //29
       console.log(result2)  //10
    

    9. 如下代码的输出?

        console.log(a); //输出undefined,因为变量a声明提前,但此时还未被赋值
        var a = 1;
        console.log(b); //报错“b is not defined”,因为b未被声明
    

    10. 如下代码的输出?

        sayName('world');
        sayAge(10);
        function sayName(name){
            console.log('hello ', name); //输出hello world,因为函数声明提前
        }
        var sayAge = function(age){
            console.log(age); //报错,因为使用函数表达式必须在其后调用,否则认为sayAge不是函数
        };
    

    11. 作用域链查找过程伪代码 ,举例如下:

    var x = 10
    bar() 
    function foo() {
      console.log(x)
    }
    function bar(){
      var x = 30
      foo()
    }
    /*****************************************************************************/
    //作用域链查找过程如下:
    //首先全局作用域中声明的变量有:x,函数有foo(),bar()
    globalContext = {
        AO:{
            x:10
            foo:function
            bar:function
        },
        Scope:null
    }
    //此时被声明的函数foo(),bar()的scope为 globalContext.AO
    foo.[[scope]] = globalContext.AO
    bar.[[scope]] = globalContext.AO
    //继续执行,进入bar的执行上下文
    barContext = {
        AO:{
         x:30
        }
        scope:bar.[[scope]] = globalContext.AO
    }
    //调用foo从scope中找到,进入foo的执行上下文
    fooContext = {
        AO:{    
        }
        scope:foo.[[scope]] = globalContext.AO
    }
    //从foo的scope:globalContext.AO中找到x:10,所以输出10。
    
    

    输出10

    12. 如下代码输出什么? 写出作用域链查找过程伪代码

    var x = 10;
    bar() 
    function bar(){
      var x = 30;
      function foo(){
        console.log(x) 
      }
      foo();
    }
    /***********************************************************************/
    //全局作用域中声明变量x,函数bar()
    globalContext = {
      AO: {
        x: 10
        bar: function
      }
      Scope: null
    }
    //此时被声明的bar()的scope为globalContext.AO
    bar.[[scope]] = globalContext.AO
    //进入bar执行上下文
    barContext = {
      AO: {
        x: 30
        foo: function
      }
      Scope: bar.[[scope]] = globalContext.AO
    }
    //foo()被声明,它的scope为barContext.AO
    foo.[[scope]] = barContext.AO
    
    fooContext = {
      AO: {  }
      Scope: foo.[[scope]] = barContext.AO
    }
    

    输出为30

    13. 以下代码输出什么? 写出作用域链的查找过程伪代码

    var x = 10;
    bar() 
    function bar(){
      var x = 30;
      (function (){
        console.log(x)
      })()
    }
    /************************************************************************************************/
    //全局作用域声明变量x,函数bar()
    globalContext = {
      AO: {
        x: 10
        bar: function
      }
      Scope: null
    }
    bar.[[scope]] = globalContext.AO
    
    barContext = {
      AO: {
        x: 30
        anonymous:function //匿名函数anonymous
      }
      Scope: bar.[[scope]] = globalContext.AO
    }
    anonymous.[[scope]] = barContext.AO
    
    anonymousContext = {
      AO: { }
      Scope: anonymous.[[scope]] = barContext.AO
    } 
    
    

    输出为30

    14. 以下代码输出什么? 写出作用域链查找过程伪代码

    var a = 1;
    
    function fn(){
      console.log(a)
      var a = 5
      console.log(a)
      a++
      var a
      fn3()
      fn2()
      console.log(a)
    
      function fn2(){
        console.log(a)
        a = 20
      }
    }
    
    function fn3(){
      console.log(a)
      a = 200
    }
    
    fn()
    console.log(a)
    /************************************************************************************************/
    globalContext = {
      AO: {
        a: 1
        fn: function
        fn3: function
      }
      Scope: null
    }
    fn.[[scope]] = globalContext.AO
    fn3.[[scope]] = globalContext.AO
    
    fnContext = {
      AO: {
        a: undefined
        fn2: function
      }
      Scope: fn.[[scope]] = globalContext.AO
    }
    fn2.[[scope]] = fnContext.AO
    //进入fn后先输出undefined,a赋值为5后输出5
    fn3Context = {
      AO: {}
      Scope: fn3.[[scope]] = globalContext.AO
    }
     //输出:1
    fn2Context = {
      AO: {}
      Scope: fn2.[[scope]] = fnContext.AO
    }
    console.log(a) //输出200
    

    最后结果为:undefined 5 1 6 200

    相关文章

      网友评论

          本文标题:JS函数作用域链

          本文链接:https://www.haomeiwen.com/subject/fpdbnttx.html