作用域

作者: 李永州的FE | 来源:发表于2017-06-04 12:35 被阅读0次

    补充:

    Paste_Image.png
    Paste_Image.png
    Paste_Image.png
    Paste_Image.png

    这个题还有一个函数同名覆盖的知识点

    var bb=1;
        function aa(bb) {
            bb=2;
            alert(bb);//注意这里是重新声明了一个新的bb,所以里面虽然把bb改为2了,但是丝毫不影响外面的bb,他们不是一个bb
        }
        aa(bb);
        alert(bb)
    
    Paste_Image.png

    注意函数里面打印a时是找的参数a,不是局部变量a

    Paste_Image.png

    这个后面的f把前面的f(声明前置了)覆盖了所以无论怎么执行,前面哪一个都不会再执行了

     var foo={n:1}
    (function () {
        console.log(foo.n)
        foo.n=3;
        var foo={n:2}
        console.log(foo.n)
    })(foo)
    console.log(foo.n)
    这个声明提升后是完全看不懂了,答案:1,2,3
    
    var f={
        1:0,
        foo:function () {
            console.log(i++)
        }
    }
    不懂为什么不能访问,终于明白了应该加上console.log(f.i++),我感觉我有点晕了,分不清对象和函数区别了。。。
    
        var i=5;
    function foo() {
        var i=0;
         return function  () {
            console.log(i++)
        }
    }
    var f1=foo();
    var f2=foo();
    f1();
    f1();
    f2();
    这里访问的i是内部得i不是全局的i,做了这么多题还是有点不明白,,,,
    
    var a=2;
        var func=(function () {
            var a=3;
            return function () {
                a++;
                console.log(a)
            }
        })()
    func();//4
    func();//5这里访问到的a是函数里面的
    

    1 函数声明和函数表达式有什么区别

    • 函数声明:function functionName(){}
    • 函数表达式:var fn = function(){}
    • 函数声明会提前,函数表达式可以省略函数名。输出都是1,要好好想想写写看执行顺序

    3 arguments 是什么(不知道在项目中实际用到哪?)

    • 可以在函数内部通过使用 arguments 对象来获取函数的所有参数。
    • 这个对象为传递给函数的每个参数建立一个条目,条目的索引号从0开始。它包括了函所要调用的参数

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

    在JS中,没有重载。同名函数会覆盖。但可以在函数体针对不同的参数调用执行相应的逻辑

    同学例子:
     function printPeopleInfo(name, age, sex){
        if(name){
          console.log(name);
        }
    
        if(age){
          console.log(age);
        }
    
        if(sex){
          console.log(sex);
        }
      }
      printPeopleInfo('Byron', 26);//Byron 26
      printPeopleInfo('Byron', 26, 'male');//Byron 26 male
    还有一个例子:
    A()//输出第二个A,第二个把第一个覆盖了
    function A(){
    alert('第一个A')
    }
    function A(){
    alert('第二个A')
    }
    

    5 立即执行函数表达式是什么?有什么作用

    (function(){
        var a = 1;
    })()
    作用: 隔离作用域。
    

    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
    sex: undefined
    ['小谷',3]
    name valley
    */
    getInfo('男');
    /*
    name: 男
    age: undefined
    sex: undefined
    ['男']
    name valley
    */
    

    9如下代码的输出?为什么

    sayName('world');//hello world函数声明前置
        sayAge(10);//报错,函数表达式不会前置。
        function sayName(name){
            console.log('hello ', name);
        }
        var sayAge = function(age){
            console.log(age);
        };
    

    10

    var x = 10
    bar() 
    function foo() {
      console.log(x)
    }
    function bar(){
      var x = 30
      foo()
    };//打印出10
    
           globalContext={
                AO:{
                    x:10
                    foo:function
                    bar:function
    
                }
                Scope:null
            }
            foo.[[scope]]=globalContext.AO
            bar.[[scope]]=globalContext.AO
    
            1  X赋值为10,
            2 执行bar,发现全局AO里有bar,进入bar执行上下文
            barContext={
                AO:{
                    x:30
    
                }
                Scope:globalContext.AO
            }
            3先执行x=30;
            4执行foo(),活动对象找不到foo,去scope里面找发现存在,进入foo上下文
            fooContext={
                AO:{
                    
                }
                Scope:globalContext.AO
            }
            5 foo活动对象找不到x,去作用域里面找,找到全局作用域发现X为10
    

    11

    var x = 10;
    bar() 
    function bar(){
      var x = 30;
      function foo(){
        console.log(x) 
      }
      foo();
    }
    
           globalContext={
                AO:{
                    x:10
                  
                    bar:function
    
                }
                Scope:null
            }
           
            bar.[[scope]]=globalContext.AO
    
            1  X赋值为10,
            2 执行bar,发现全局AO里有bar,进入bar执行上下文
            barContext={
                AO:{
                    x:30
                    foo:function 
    
                }
                Scope:globalContext.AO
            }
            foo.[[scope]]=barContext.AO
    
            3先执行x=30;
            4执行foo(),活动对象有foo,进入foo上下文
            fooContext={
                AO:{
    
                }
                Scope:barContext.AO
            }
            5 foo活动对象找不到x,去作用域里面找,找到bar作用域发现X为30
    

    13

    var x = 10;
    bar() 
    function bar(){
      var x = 30;
      (function (){
        console.log(x)
      })()
    }
    
        globalContext = {
            AO:{
                x:10
                bar:function
            },
            Scope:null
        }
        bar.[[scope]] = globalContext.AO
        2.调用bar()
        barContext = {
            AO:{
                x:30
                function
            },
            Scope:globalContext.AO
        }
        function.[[scope]] = barContext.AO
        3.调用立即执行函数
        functionContext = {
            AO:{},
            Scope:function.[[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-->后来变为200
    
                    fn:function 
                    fn3:function
    
                }
                Scope:null
            }
    
            fn.[[scope]]=globalContext.AO
            fn3.[[scope]]=globalContext.AO
    
            1  a赋值为1,
            2 执行fn,发现全局AO里有fn,进入fn执行上下文
            fnContext={
                AO:{
                    a:undefined->5->6->20
                    fn2:function
    
                }
                Scope:globalContext.AO
            }
            fn2.[[scope]]=fnContext.AO
    
            3 先执行打印a,为undefined;
            4 a赋值为5
            5 再次打印a为5
            6 a++变为6
            7 执行fn3,fn2活动对象没有,去找fn2作用域发现全局对象里有,进入fn3上下文
            
            fn3Context={
                AO:{
    
                }
                Scope:globalContext.AO
            }
            8 打印a,fn3活动对象没有,去全局里面找,发现全局里面的a为1,打印1
            9 a赋值为200,全局对象里a变为200
            10执行fn2,进入fn2上下文
    
            fn2Context={
                AO:{
    
                }
                Scope:fnContext.AO
            }
            11打印a,自己没有去fn里面找,发现a已经变为6
            12a赋值为20,那fn里面a变为20
            13打印a,a赋值为20
            14 跳到全局下,打印a,为200
            
            所以最后打印顺序是:undefined 5 1 6 20 200(发现不用写这个也可以看出a是多少了)
    

    相关文章

      网友评论

          本文标题:作用域

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