JavaScript 预编译与作用域

JavaScript 预编译的过程和作用域的分析步骤是 JS 学习中重要的一环,能够帮助我们知道代码的执行顺序,更好理解闭包的概念

预编译

  1. JavaScript 执行步骤

    检查通篇的语法错误 -> 预编译 -> 解释执行

  2. 暗示全局变量

    变量不声明直接赋值,挂载到 window 对象下

    a = 1;
    console.log(a); // 1
    
    function test() {
        var b = c = 1;
    }
    test();
    console.log(c); // 打印 1,c 未声明,直接赋值,暗示全局变量
    console.log(window.b); // undefined,打印对象不存在属性,返回 undefined
    console.log(b); // 报错
    
  3. 预编译过程

    函数声明整体提升

    变量声明提升,赋值不提升

    test(); // 放在前面可以执行
    function test() {
    
    }
    console.log(a); // 打印出 undefined
    var a = 1; // 声明提升,赋值不提升
    

GO

  1. global object,全局上下文,即 window 对象
  2. 在全局执行的前一刻,生成 GO,即变量声明提升和函数声明提升
  3. 步骤:寻找变量声明 -> 寻找函数声明 -> 顺序执行

    var a = 1; // (1)
    function a() {
        console.log(2);
    }
    console.log(a); // (2)
    // 全局预编译
    // 变量声明 a -> GO{a: undefined} 
    // 函数声明 a(){} -> GO{a: a(){}} 
    // 全局执行
    // 执行 (1) -> GO{a: 1}
    // 执行 (2),打印 1
    
    console.log(a); // (1)
    var a = 1; // (2)
    console.log(a); // (3)
    function a() {
       console.log(2);
    }
    // 全局预编译
    // 变量声明 a -> GO{a: undefined} 
    // 函数声明 a(){} -> GO{a: a(){}}
    // 全局执行
    // 执行 (1),打印 a(){...}
    // 执行 (2) -> GO{a: 1}
    // 执行 (3),打印 1
    

AO

  1. activation object,函数上下文,即活跃对象
  2. 每个函数都有自己的 AO,函数执行前一刻生成,执行完以后销毁
  3. 步骤:寻找形参和变量声明 -> 形参实参映射 ->寻找函数声明 -> 顺序执行
  4. 注意:AO 中有 var a 声明,不会找 GO 里的 a

    function test(a) {
        console.log(a); // (1)
        var a = 1; // (2)
        console.log(a); // (3)
        function a() {}
        console.log(a); // (4)
        var b = function() {} // (5)
        console.log(b); // (6)
        function d() {}
    }
    test(2); 
    // 全局预编译
    // 函数声明 test(){} -> GO{a: test(){}} 
    // 全局执行
    // 执行到 test(2),函数 test 预编译
    // 变量声明 a, b -> test_AO{a: undefined, b: undefined}
    // 参数映射 -> test_AO{a: 2, b: undefined}
    // 函数声明 -> test_AO{a: a(){}, b:undefined, d: d(){}}
    // 函数 test 执行
    // 执行 (1),打印 a(){}
    // 执行 (2) -> test_AO{a: 1, b: undefined, d: d(){}}
    // 执行 (3),打印 1
    // 执行 (4),打印 1
    // 执行 (5) -> test_AO{a: 1, b: (){}, d: d(){}}
    // 执行 (6),打印 (){}
    // 函数 test 执行完毕,test_AO 销毁
    
  5. 练习

    a = 1; // (1)
    function test() {
        console.log(a); // (2)
        a = 2; // (3)
        console.log(a); // (4)
        if(a) { // (5),预编译时不看 if,因为没有执行该句
            var a = 3; 
        }
        console.log(a); // (6)
    }
    test();
    var a;
    // 全局预编译
    // 变量声明、函数声明 -> GO{a: undefined, test: test(){}}
    // 全局执行
    // 执行 (1) -> GO{a: 1, test: test(){}}
    // 执行到 test(),函数 test 预编译
    // 变量声明 -> test_AO{a: undefined}
    // 函数 test 执行
    // 执行 (2),打印 undefined
    // 执行 (3) -> AO{a: 2}
    // 执行 (4),打印 2
    // 执行 (5) -> AO{a: 3}
    // 执行 (6) -> 打印 3
    // 函数 test 执行完毕,test_AO 销毁
    

作用域

  1. 函数的属性

    函数是一种引用类型

    有一些原生属性可以利用,也有一些属性不能访问,是 js 引擎内部固有的隐式属性

    [[scope]] 就是 JS 内部隐式属性,是函数存储作用域链的容器

    function test() {
    
    }
    console.log(test.name); // test
    console.log(test.length); // 0
    
  2. 作用域链

    在函数声明时,生成 JS 内部隐式属性 [[scope]],该属性的第 0 位保存全局执行期上下文 GO 的一个引用

    在函数执行前一刻,[[scope]] 第 0 位保存函数执行期上下文 AO,后一位保存外层函数的 AO,最后保存 GO 引用。如果没有外层函数,则第 0 位 AO,第 1 位 GO。在寻找声明时,都会由 0 位向后寻找,即先看自己,再看外层,最后看全局

    在函数执行完毕时,从 [[scope]] 中销毁 AO

    function a() {
        funtion b() {
            var b = 2; // (3)
        }
        var a = 1; // (2)
        b(); 
    }
    var c = 3; // (1)
    a();
    // 全局预编译
    // -> GO{c: undefined, a: a(){}}
    // -> a.SCOPE = [
    //                GO{c: undefined, a: a(){}}
    //        ]
    // 全局执行
    // 执行 (1)
    // -> GO{c: 3, z a(){}}
    // -> a.SCOPE = [
    //                GO{c: 3, a: a(){}}
    //        ]
    // 执行到 a(),函数 a 预编译
    // -> a.SCOPE = [
    //                a_AO{a: undefined, b: b(){}}, 
    //                GO{c: 3, a: a(){}}
    //        ]
    // -> b.SCOPE = [
    //                a_AO{a: undefined, b: b(){}}, 
    //                GO{c: 3, a: a(){}}
    //        ]
    // 函数 a 执行
    // 执行 (2)
    // -> a.SCOPE = [
    //                a_AO{a: 1, b: b(){}}, 
    //                GO{c: 3, a: a(){}}
    //        ]
    // 执行到 b(),函数 b 预编译
    // -> b.SCOPE = [
    //                b_AO{b: undefined}, 
    //                a_AO{a: 1, b: b(){}}, 
    //                GO{c: 3, a: a(){}}
    //        ]
    // 执行 (3)
    // -> b.SCOPE = [
    //                b_AO{b: 3}, 
    //                a_AO{a: 1, b: b(){}}, 
    //                GO{c: 3, a: a(){}}
    //        ]
    // 函数 b 执行完毕,b_AO 销毁
    // -> b.SCOPE = [
    //                a_AO{a: 1, b: b(){}}, 
    //                GO{c: 3, a: a(){}}
    //        ]
    // 函数 a 执行完毕,a_AO 销毁
    // -> b.SCOPE 销毁
    // -> a.SCOPE = [
    //                GO{c: 3, a: a(){}}
    //        ]
原文链接:segmentfault.com

上一篇:html2canvas使用文档,附赠解决图片不清晰问题办法(非改源码)
下一篇:JavaScript之对象类型转换

相关推荐

官方社区

扫码加入 JavaScript 社区