js-预编译流程解析变量提升

js 预编译

步骤

先分析整个页面，然后逐一执行。此时会产生 GO 对象，Global Object 对象。

GO 对象

1、将所有变量作为 GO 的属性，值均为 undifined

2、将函数声明也作为 GO 的属性，值为函数体。当函数声明和变量名相同时，覆盖第一步

执行函数时，产生 AO 对象，Actived Object 对象。

1、将多有变量，形参作为 AO 的属性，值均为 undifined

2、实参的值赋给形参

3、将函数声明作为 AO 的属性，值为函数体，同样若与变量相同则覆盖

总结

预编译的四部曲：

1. 创建 GO(global object)/AO(active object) 对象
2. 找形参和变量声明，将变量和形参名作为 AO 属性名，值为 undefined
3. 将实参值和形参统一
4. 在函数体里面找函数声明，值赋予函数体

DEMO

 function f(a){console.log(a);
      var a=123;
      console.log(a);
      function a(){}
      var b=function(){}
      function d(){}
  }
  f(1)

代码分析：

1. 创建 AO 对象

AO={}

2. 找形参和变量声明，将变量和形参名作为 AO 属性名，值为 undefined

AO={
    a:undefined,
    b:undefined
}

3. 将实参值和形参统一

AO={
    a:1,
    b:undefined
}

4. 在函数体里面找函数声明, 值赋予函数体：由于在函数中有 function a() {}，这一函数因此此时 AO 中 a = function a() {}

AO={a:function a(){},
 b:undefined,
 d:function d(){}
}

然后代码依次执行，第一个 console 时取 AO 中的 a 为 function a(){}, 然后 a =123, 改变 AO 中的 a

AO={
 a:123,
 b:undefined,
 d:function d(){}
}

接着打印 a 为 123

附带京东面试题

var name = 'Tom';
(function() {if (typeof name == 'undefined') {
  var name = 'Jack';
  console.log('Goodbye' + name);
} else {console.log('Hello' + name);
}
})();

变形一

var name = 'Tom';
(function(name) {if (typeof name == 'undefined') {
        var name = 'Jack';
        console.log('Goodbye' + name);
    } else {console.log('Hello' + name);
    }
})(name);

变形二

var name = 'Tom';
(function() {if (typeof name == 'undefined') {
        let name = 'Jack';
        console.log('Goodbye' + name);
    } else {console.log('Hello' + name);
    }
})();