欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript 预编译与作用域

程序员文章站 2022-03-26 14:14:53
JavaScript 预编译的过程和作用域的分析步骤是 JS 学习中重要的一环,能够帮助我们知道代码的执行顺序,更好理解闭包的概念 ......

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(){}}
    //       ]