一、函數的作用域

• 函數作用域有點像單面鏡（外面看不到里面，里面可以看到外面）
• JS的特點：單線程、是 解釋性語言 (翻譯一行，執行一行)

二、預解析

JS預解析三部曲：語法解析 ? 預編譯 ? 解釋執行

JS 在執行之前會通篇掃描代碼，看有沒有語法語義錯誤（語法解析），如果沒有，然后開始執行代碼（預編譯）

• 通篇掃描 --> 語法分析
• 通篇掃描之后開始執行 --> 預解析

test(); // 這種情況仍然會執行，就是預編譯的作用function test() {console.log('a'); }// 在沒有定義之前就使用結果為 undefined console.log(a); // 能輸出，是 undefined，還是因為預解析 var a = 10;// 但是這種就不行，因為變量沒有定義就執行 b is not defined console.log(b);

三、變量和函數的提升

函數聲明整體提升：不管你在哪調用函數，因為預解析會把函數提到邏輯的最前面，所以都是在函數的下面調用這個函數

變量聲明提升

imply global 暗示全局變量：即任何變量，如果變量未經聲明就賦值，此變量就為全局對象所有

a = 123; console.log(a); // 123 console.log(window.a); // 123

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

var b = 234; console.log(b); --> console.log(window.b); // 234

如果在全局作用域下訪問變量，就相當于訪問 window.變量名

var a = b = 123; // 順序：先把 123 賦值給 b；再 let a 聲明變量；最后把 b 賦值給 a。 // 但是這就導致了，b 歸全局作用域所有 console.log(window.a, window.b); // undefiend 123var c = d = 234; console.log(window.c, window.d); // 234 234

預編譯四部曲

創建AO對象

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

將實參值和形參統一

在函數體里面找函數聲明，值賦予函數體

預編譯練習 – 提升的意思就是被優先執行了

function fn(a) {console.log(a); // function a() {}var a = 123;console.log(a); // 123function a() {}console.log(a); // 123var b = function () {}console.log(b); // function() {}function d() {} }// 預編譯發生在函數執行的前一刻 fn(1);/*1. 創建AO對象 (Activation Object) 2. 用形參和變量聲明的名，作為AO對象的屬性名，值統一為 undfiendAO {a : undefined,b : undefined}3. 把形參和實參的值統一AO {a : 1,b : undefined}4. 在函數體里面找函數聲明，賦予函數體AO {a : function a() {}, // 只有函數聲明會提升，函數表達式不會提升b : undefined,d : function d() {}}5. 函數執行AO {a : 123,b : function() {},d : function d() {}} */

在全局下會生成一個GO對象(Global Object)

function test() {var a = b = 123;console.log(a);console.log(window.b); // 123console.log(window.a); // undefined } test();/*GO: {b: 123;}AO: {a: undefined} */

函數聲明整體提升 變量聲明提升

a = 100; function demo(e) {function e() {}arguments[0] = 2;console.log(e); // 2if (a) { // a 是 undefined 所以這里 if 不會執行var b = 123;function c() {// 豬都能做出來}}var c;a = 10;var a;console.log(b); // undefinedf = 123;console.log(c); // undefinedconsole.log(a); // 10 } var a; demo(1); console.log(a); // 100 console.log(f); // 123/*GO {a: 100f: 123function demo() {}}AO {c: undefineda: 10e: 2} */

總結

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

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