首先要記住：預編譯發生在函數執行的前一刻

先來一個小知識：

函數聲明整體提升

test(); function test(){...//省略n行代碼 }

在預編譯階段，會把函數聲明提升到代碼頂部：

function test(){.... } test();

變量聲明提升

console.log(a); var a=123;

在預編譯階段，會把var聲明提升到代碼段的頂端：

var a; console.log(a); a=123;

控制臺輸出 undefined

但上面兩點在遇到下面這種情況時就不夠用了

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

接下來就是預編譯表演的時刻了：

創建AO(Activation Object----活躍對象)對象(另一個名稱叫執行期上下文)

AO{}

找形參和變量聲明，將變量和形參名作為AO屬性名，值為undefined

AO{a:undefind,//形參和變量重名時，不需要重復創建b:undefind }

將實參值和形參統一

AO{a:1,b:undefind }

在函數體里找函數聲明，函數名為AO屬性名，值為函數體

AO{a:function a() {},//當函數名重名時，不需要重復創建，直接賦值即可b:undefind,d:function () {} }

原函數變為(忽略變量聲明與函數聲明)：

function fn(a){console.log(a);//從AO中取a的值為function a() {}a=123;//把123賦給給AO中的aconsole.log(a);//此時a為123console.log(a);//還是123b=function () {}//把函數體賦給AO中的bconsole.log(b)//function b() {}function d() {} } fn(1);

再來一個例子

function test(a,b){console.log(a);c=0;var c;a=3;b=2;console.log(b);function b() {}function d() {}console.log(b); } test(1);

創建AO對象

AO{}

找形參和變量聲明，將變量和形參名作為AO屬性名，值為 undefined

AO{a:undefind,b:undefind，c:undefind }

將實參值和形參統一

AO{a:1,b:undefind，c:undefind }

在函數體里找函數聲明，函數名為AO屬性名，值為函數體

AO{a:1,b:function b() {}，c:undefind,d:function d() {} }

原函數變為(忽略變量聲明與函數聲明)：

function test(a,b){console.log(a);//AO中a的值為1c=0;//0賦給AO中的ca=3;//3賦給AO中的ab=2;//2賦給AO中的bconsole.log(b);//AO中b的值為2console.log(b);//2 } test(1);

練習：

function test(a,b){console.log(a);console.log(b);var b=234;console.log(b);a=123;console.log(a);function a() {}var a;b=345;var b=function b() {}console.log(a);console.log(b); } test(1); AO{a:function a() {},b:undefind }

(忽略變量聲明與函數聲明)

function test(a,b){console.log(a);//function a() {}console.log(b);//undefindb=234;console.log(b);//234a=123;console.log(a);//123b=345;b=function b() {}console.log(a);//123console.log(b);//function b() {} } test(1);

上面只是講述在函數中的預編譯，接下來加入全局的，中間插播一段作用域的小知識

一切聲明的全局變量，都是 window 的屬性

var a = 3; ===> window.a = 3;

所有未經聲明就賦值的變量都是全局變量

1. a=3;2. var a = b = 3;//b未聲明就賦值

回到我們的預編譯

var a=123; function a() {var a=b=3; } a();

生成一個GO(Global Object---全局對象)對象

GO{a:123,b=3;//未經聲明的變量賦值為全局變量 } GO ===> window

執行a(),生成AO對象

讓我們來熟悉一下全局對象

var a=100; function fn() {console.log(a); } fn();

生成GO

GO{a:100,fn:function fn() {} }

執行fn()前一刻生成AO對象

AO{}

執行fn()

首先在自己的AO中找a屬性 AO{}AO中沒有，去上一級GO中找 GO{a:100,fn:function fn() {} }找到a,控制臺打印100

舉個栗子：

console.log(test); function test(test){console.log(test);var test=234;console.log(test);function test() {} } test(1); var test =123;

生成GO，生成的過程步驟與AO一樣

GO{test:function test() {} } console.log(test);//function test() {} function test(test){... } test(1); var test =123;

執行到test(1)前一刻，生成AO

AO{test:function test() {} }

執行test(1)(忽略變量聲明與函數聲明)

function test(test){console.log(test);//首先會在自己的AO中找是否有test屬性，有就用自己的，沒有就去GO中找，此時AO中有test，值為function test() {}test=234;console.log(test);//234 }

以上為本人觀看成哥javascript視頻教程后對預編譯的總結，如有錯誤請指出。

轉載于:https://juejin.im/post/5b0f5edc6fb9a00a0c372c1b

總結

以上是生活随笔為你收集整理的javascript之预编译的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。