Javascript中的预编译(学习记录)

原文链接

全局预编译的步骤

1. 创建GO（Global Object，全局执行期上下文，在浏览器中为window）对象；
2. 寻找var变量声明，并赋值为undefined；
3. 寻找function函数声明，并赋值为函数体；
4. 执行代码。

函数预编译的步骤

1. 创建AO对象，执行期上下文（后面更新关于执行期上下文详解）。
2. 寻找函数的形参和变量声明，将变量和形参名作为AO对象的属性名，值设定为undefined.
3. 将形参和实参相统一，即更改形参后的undefined为具体的形参值。
4. 寻找函数中的函数声明，将函数名作为AO属性名，值为函数体。

var a = 1;
console.log(a);
function test(a) {
    
    
  console.log(a);
  var a = 123;
  console.log(a);
  function a() {
    
    }
  console.log(a);
  var b = function() {
    
    }
  console.log(b);
  function d() {
    
    }
}
var c = function (){
    
    
console.log("I at C function");
}
console.log(c);
test(2);

1. 全局预编译后

GO{
    
    
    a: undefined,
    c: undefined，
    test: function(a) {
    
    
        console.log(a);
        var a = 123;
        console.log(a);
        function a() {
    
    }
        console.log(a);
        var b = function() {
    
    }
        console.log(b);
        function d() {
    
    }
    }
}

2. 循序执行代码

GO{
    
    
    a: 1,
    c: function (){
    
    
        console.log("I at C function");
    }，
    test: function(a) {
    
    
        console.log(a);
        var a = 123;
        console.log(a);
        function a() {
    
    }
        console.log(a);
        var b = function() {
    
    }
        console.log(b);
        function d() {
    
    }
    }
}

3. 执行到test(2),函数开始预编译

//3.1
AO{
    
    
    a: undefined,
    b: undefined
}
//3.2
AO{
    
    
    a: 2,
    b: undefined
}
//3.3
AO{
    
    
    a: function(){
    
    },
    b: undefined,
    d: function(){
    
    }
}

4. 最终结果

var a = 1;
console.log(a); // 1
function test(a) {
    
    
  console.log(a); // function a() {}
  var a = 123;
  console.log(a); // 123
  function a() {
    
    }
  console.log(a); // 123
  var b = function() {
    
    }
  console.log(b); // function b() {}
  function d() {
    
    }
}
var c = function (){
    
    
console.log("I at C function");
}
console.log(c); // function c(){ console.log("I at C function"); }
test(2);

1. 练习题及讲解
2. 练习题及讲解