js 預編譯流程->解析變量提高

js預編譯

步驟

先分析整個頁面，而後逐一執行。此時會產生GO對象，Global Object對象。

GO對象

一、將全部變量做爲GO的屬性，值均爲undifined

二、將函數聲明也做爲GO的屬性，值爲函數體。當函數聲明和變量名相同時，覆蓋第一步

執行函數時，產生AO對象，Actived Object對象。

一、將多有變量，形參做爲AO的屬性，值均爲undifined

二、實參的值賦給形參

三、將函數聲明做爲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);
    }
})();