JavaScript预编译

354 阅读1分钟

JavaScript的预编译过程总结为4步

  1. 创建AO对象
  2. 寻找形参和变量声明
  3. 形参值与实参值相统一
  4. 寻找函数声明

函数在执行之前会产生一个上下文对象,即Activeaction Object,简称AO对象。
AO对象初始为一个空对象,但是里面有一些隐含的默认属性,比如:this:window, arguments: []。
在预编译过程中将会对该对象进行属性的添加等操作。

下面举个例子来看一遍整个预编译过程

假如有以下代码:

function test (a, b) {
    console.log(a);
    function a () {};
    a = 10;
    console.log(a);
    function b () {};
    console.log(b);
    var b = 111;
    var a = 0;
}
test(2);

接下来分别按照上面的4个步骤进行执行

  1. 创建AO对象
//此时AO对象为
AO = {
    this: window,
    arguments: [],
    ...等隐含属性
}
  1. 寻找形参及变量声明
// 形参为a,b, 变量声明了a,b
// 此时AO对象为
AO = {
    // ...默认属性
    a: undefined,
    b: undefined,
}
  1. 形参值与实参值相统一
AO = {
    // ...默认属性
    a: 2,
    b: undefined,
}
  1. 寻找函数声明
AO = {
    // ... 默认属性
    a: function a () {},
    b: function b () {},
}

至此预编译阶段完成,接下来将进行js的执行。

function test (a, b) {
    console.log(a);  // 此时AO对象中a为function a () {}
    function a () {};
    a = 10;     // 对a赋值为10
    console.log(a);  // 10
    function b () {};
    console.log(b);  // function b () {}
    var b = 111;    // 对b赋值为 111
    var a = 0;      // 对a赋值为 0
}
test(2);

所以执行结果应该为

身为一名初入前端的菜鸟,希望自己可以把成长的经历记录下来,以上为个人理解,如有不足,欢迎斧正。