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