一、函數作用域
1.函數作用域
就是作用域在一個“Function”裡,屬於這個函數的全部變量都可以在整個函數的范圍內使用及復用。
function foo(a) { var b = 2; function bar() { // ... } var c = 3; } bar(); // 失敗 console.log( a, b, c ); // 三個全都失敗
上面的“foo”函數內的幾個標識符,放到函數外面訪問就都會報錯。
2.立即執行函數表達式
在任意代碼片段外部添加包裝函數,可以將內部的變量和函數定義“隱藏”起來,外部作用域無法訪問包裝函數內部的任何內容。
例如上面的bar、a等幾個標識符。這樣能夠保護變量不被污染。
在寫插件的時候經常會用到立即執行函數表達式,為的就是保護裡面的變量。
var a = 2; (function foo() { var a = 3; console.log( a ); // 3 })(); console.log( a ); // 2
“foo”中第一個( )將函數變成表達式,第二個( )執行了這個函數。
有一個專用術語:IIFE,代表立即執行函數表達式(Immediately Invoked Function Expression);
1. 進階用法是把它們當作函數調用並傳遞參數進去
(function IIFE( global ) { var a = 3; console.log( a ); // 3 console.log( global.a ); // 2 })( window );
2. 一種變化的用途是倒置代碼的運行順序,在CMD或AMD項目中被廣泛使用。
(function IIFE(factory) { factory( window ); })(function def( global ) { var a = 3; console.log( a ); // 3 console.log( global.a ); // 2 });
二、塊作用域
JavaScript不支持塊作用域。
for(var i=0; i<10; i++) { console.log( i ); }
上面的代碼中的“i”相當於下面的
var i; for(i=0; i<10; i++) { console.log( i ); }
但也有例外,“try/catch”,catch就是一個塊作用域。
try{ undefined(); // 執行一個非法操作來強制制造一個異常 } catch(err) { console.log( err ); // 能夠正常執行! } console.log( err ); // ReferenceError: err not found
ES6改變了現狀,引入了新的let關鍵字,let關鍵字可以將變量綁定到所在的任意作用域中(通常是{ .. }內部)。換句話說,let為其聲明的變量隱式地了所在的塊作用域。
三、提升
函數作用域和塊作用域的行為是一樣的,可以總結為:任何聲明在某個作用域內的變量,都將附屬於這個作用域。
1)編譯與執行
變量和函數的所有聲明都會在任何代碼被執行前首先被處理,可以看下面的代碼事例。
a = 2; var a; console.log(a);//2
這段代碼等價於:
var a;//定義聲明是在編譯階段進行 a = 2;//賦值聲明會被留在原地等待執行階段 console.log(a);
2)函數優先
函數會首先被提升,然後才是變量。
foo(); // 1 var foo; function foo() { console.log( 1 ); } foo = function() { console.log( 2 ); };
var foo函數表達式盡管出現在function foo()的聲明之前,但它是重復的聲明(因此被忽略了),因為函數聲明會被提升到普通變量之前。
而上面的代碼相當於:
function foo() { console.log( 1 ); } foo(); // 1 foo = function() { console.log( 2 ); };
四、閉包
閉包是指有權訪問另一個函數作用域中變量的函數,創建閉包的最常見的方式就是在一個函數內創建另一個函數,
通過另一個函數訪問這個函數的局部變量,利用閉包可以突破作用鏈域,將函數內部的變量和方法傳遞到外部
閉包的特性:
1.函數內在嵌套函數
2.內部函數可以引用外層的參數和變量
3.參數和變量不會被垃圾回收機制回收
1)定義
當函數可以記住並訪問所在的作用域時,就產生了閉包,即使函數是在當前作用域之外執行。
function foo() { var a = 2; function bar() { console.log( a ); } return bar; } var baz = foo(); baz(); // 2 —— 這就是閉包的效果。
1. 將函數“bar”賦值給“baz”,執行“baz”,當前作用域並不在“bar”的作用域,但是可以執行。
2. 閉包還會阻止垃圾回收,當“foo”執行完後,內部作用域仍然存在。這樣才能讓“baz”執行。
2)將函數作為參數傳遞
function foo() { var a = 2; function baz() { console.log( a ); // 2 } bar( baz ); } function bar(fn) { fn(); //這就是閉包! }
把內部函數baz傳遞給bar,當調用這個內部函數時(fn),它涵蓋的foo()內部作用域的閉包就可以觀察到了,因為它能夠訪問a。
如果將函數當作第一級的值類型並到處傳遞,你就會看到閉包在這些函數中的應用。
在定時器、事件監聽器、Ajax請求、跨窗口通信、Web Workers或者任何其他的異步(或者同步)任務中,只要使用了回調函數,實際上就是在使用閉包!
3)循環和閉包
for (var i = 1; i <= 5; i++) { setTimeout(function timer() { console.log(i); }, i * 1000); }
每次打印出來都將會是6,延遲函數的回調會在循環結束時才執行
根據作用域的工作原理,實際情況是盡管循環中的五個函數是在各個迭代中分別定義的,但是它們都被封閉在一個共享的全局作用域中,因此實際上只有一個i。
現在用閉包來實現每次打印不同的i。
for (var i = 1; i <= 5; i++) { (function(j) { setTimeout(function timer() { console.log(j); }, j * 1000); })(i); }
IIFE會通過聲明並立即執行一個函數來創建作用域。setTimeout中的回調可以記住當前的作用域,每個作用域中的參數“j”都是不同的。
以上所述是小編給大家介紹的JavaScript中最容易混淆的作用域、提升、閉包知識詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!