zoukankan      html  css  js  c++  java
  • 前端学习(35)~js学习(十二):预编译

    我们在上一篇文章《作用域》中简单讲过“变量提升”,今天来讲一下预编译,这对我们深入理解变量提升会有帮助。

    JavaScript 运行三部曲

    • 语法分析

    • 预编译

    • 解释执行

    预编译前奏

    在讲预编译前,我们先来普及下面两个规律。

    两个规律

    规律1:任何变量,如果未经声明就赋值,此变量是属于 window 的属性,而且不会做变量提升。(注意,无论在哪个作用域内赋值)

    比如说,如果我们直接在代码里写 console.log(a),这肯定会报错的,提示找不到 a。但如果我直接写 a = 100,这就不会报错,此时,这个 a 就是 window.a

    规律2:一切声明的全局变量,全是window的属性。(注意,我说的是在全局作用域内声明的全局变量,不是说局部变量)

    比如说,当我定义 var a = 200 时,这此时这个 a 就是 window.a

    由此,我们可以看出:window 代表了全局作用域(是说「代表」,没说「等于」)。

    举例

    掌握了上面两句话之后,我们再来看看下面的例子。

    function foo() {
        var a = b = 100; // 连续赋值
    }
    
    foo();
    
    console.log(window.b); // 在全局范围内访问 b
    console.log(b); // 在全局范围内访问 b,但是前面没有加 window 这个关键字
    
    console.log(window.a); // 在全局范围内访问 a
    console.log(a); // 在全局范围内访问 a,但是前面没有加 window 这个关键字

    上方代码的打印结果:

    100
    
    100
    
    undefined
    
    (会报错,提示 Uncaught ReferenceError: a is not defined)

    解释:

    当执行了foo()函数之后, var a = b = 100 这行连续赋值的代码等价于 var a = (b = 100),其执行顺序是:

    (1)先把 100 赋值给 b;

    (2)再声明变量 a;

    (3)再把 b 的值赋值给 a。

    我们可以看到,b 是未经声明的变量就被赋值了,此时,根据规律1这个 b 是属于 window.b a 的作用域仅限于 foo() 函数内部不属于 window。所以也就有了这样的打印结果。

    预编译

    函数预编译的步骤

    函数预编译,发生在函数执行的前一刻。

    (1)创建AO对象。AO即 Activation Object 活跃对象,其实就是「执行期上下文」。

    (2)找形参和变量声明,将形参名和变量作为 AO 的属性名,值为undefined。

    (3)将实参值和形参统一,实参的值赋给形参。

    (4)查找函数声明,函数名作为 AO 对象的属性名值为整个函数体

    这个地方比较难理解。但只有了解了函数的预编译,才能理解明白函数的执行顺序。

    代码举例:

    function fn(a) {
        console.log(a);
    
        var a = 666;
    
        console.log(a);
    
        function a() {}
    
        console.log(a);
    
        var b = function() {};
    
        console.log(b);
    
        function c() {}
    }
    
    fn(1);

    打印结果:

    ƒ a() {}
    666
    666
    ƒ () {}
  • 相关阅读:
    后端架构师技术图谱
    互联网经典技术架构
    软件开发知识体系(二)
    软件开发知识体系(一)
    HSF源码剖析
    分库分表的几种常见形式以及可能遇到的难题
    iOS 关于MVC和MVVM设计模式的那些事
    MVC与MVP简单对比
    MVC、MVP、MVVM 模式
    Learning Android ActionBar
  • 原文地址:https://www.cnblogs.com/Vincent-yuan/p/12423719.html
Copyright © 2011-2022 走看看