1. 程式人生 > >你有真正瞭解閉包嗎?

你有真正瞭解閉包嗎?

JavaScript語言精粹對閉包是這樣描述的:

首先列舉了一個例子:

//建立一個名為 quo 的建構函式
 //它構造出帶有 get_status 方法和 status 私有屬性的一個物件
 var quo = function (status) {
 return {
 get_status:function () {
 return status;
 }
 };
 };
 //構造一個 quo 例項
 var myQuo = quo("amazed");
 document.writeln(myQuo.get_status());

這個 quo 函式被設計成無須再前面加上new 來使用, 所以名字也沒有首字母大寫。當我們呼叫 quo 時,它返回包含get_status 方法的一個新物件。該物件的一個引用儲存在myQuo中。即使quo 已經返回了,但是get_status 方法仍然享有返回 quo 物件的 status 屬性的特權。get_status 方法並不是訪問該引數的一個副本,它訪問的就是該引數本身。這是可能的,因為該函式可以訪問它被建立時所處的上下文環境。這就是閉包。

image.png

                      1.閉包可以簡單的理解為函式巢狀。
                    2.每一個函式都可以理解為閉包。
                   3.閉包不是一句話可以簡單概括的。

閉包是指有權訪問另一個函式作用域中的變數的函式。建立閉包的常見方式,就是在一個函式內部建立另一個函式,仍以前面的 createComparisonFunction() 函式為例,注意加粗的程式碼。

function createComparisonFunction(propertyName) {
 return function (object1, object2) {
 var value1 = object1[propertyName];
 var value2 = object2[propertyName];
 
 if(value1 < value2){
 return -1;
 } else if(value1 > value2){
 return 1;
 } else {
 return 0;
 }
 };
 }

在這個例子中,突出的那兩行程式碼是內部函式(一個匿名函式)中的程式碼,這兩行程式碼訪問了外部函式中的變數 propertyName 。即使這個內部函式被返回了,而且是在其他地方被呼叫了,,但它仍然可以訪問變數 propertyName 。之所以還能夠訪問這個變數,是因為內部函式的作用域鏈中包含createComparisonFunction() 的作用域。要徹底搞清楚其中的細節,必須從理解函式被呼叫的時候都會發生什麼入手。
本次給大家推薦一個免費的學習群,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q群:864305860,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視訊資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。