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);    }})();