js 閉包理解筆記

liuyix 發布于2019-08-22 16:23 / 386人閱讀

摘要：發現指向的是，也就是說，在函數內部實現的閉包函數已經被轉變成了全局函數，存儲到了內存中。閉包同樣可以模擬面向對象的私有變量的方法和變量的使用和獲取。

https://developer.mozilla.org...

首先引用來自官網文檔的定義：

closure is the combination of a function and the lexical environment within which that function was declared.
閉包是一個函數和其內部公開變量的環境的集合.

簡單而言，閉包 = 函數 + 環境

第一個閉包的例子

function init() {
  var name = "Mozilla"; // name is a local variable created by init
  function displayName() { // displayName() is the inner function, a closure
    alert(name); // use variable declared in the parent function    
  }
  displayName();    
}
init();

because inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().

其實這個栗子很簡單，displayName()就是init()內部的閉包函數，而為啥在displayName內部可以調用到外部定義的變量 name 呢，因為js內部函數有獲取外部函數中變量的權限。

第二個栗子

var data = [
    {"key":0},
    {"key":1},
    {"key":2}
];
function showKey() {
    for(var i=0;i
上面這個例子可以正確輸出 10 11 12 嗎？
答案是：并不能，并且還會報語法錯誤....

console.log(i); 發現i輸出了3次3,也就是說，在setTimeout 1000毫秒之后，執行閉包函數的時候，for循環已經執行結束了，i是固定值，并沒有實現我們期望的效果。
console.log(this); 發現 this 指向的是 Window，也就是說，在函數內部實現的閉包函數已經被轉變成了全局函數，存儲到了內存中。

所以需要再定義一個執行函數
var data = [
    {"key":0},
    {"key":1},
    {"key":2}
];
function showKey() {
    var f1 = function(n){
        data[i].key = data[i].key + 10;
        console.log(data[i].key)
    }
    for(var i=0;i
第三個閉包的例子-柯里化(currying)
function makeAdder(x) {
  return function(y) {
    return function(z) {
        return x + y + z;
    }
  };
}

console.log(makeAdder(1)(2)(3)); // 6

// function factory it creates functions which can add a specific value to their argument
var add5 = makeAdder(5);
console.log(add5(1)(2));  // 8
console.log(add5(4)(5));  // 14
這種返回function的形式就是柯里化，作用是 makeAdder 可以作為一個 function factory來使用。
第四個閉包的例子 - practicle closure

閉包的適用場景：當你想要通過一個function來操作它關聯的數據時，閉包是很有用的，這種使用方法是類似面向對象的。
閉包同樣可以模擬面向對象的私有變量的方法和變量的使用和獲取。

var counter = (function() {
  // private variable
  var privateCounter = 0; 

  // private function
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    changeValue: function(val) {
      changeBy(val);
    },
    value: function() {
      return privateCounter;
    }
  };   
})();

console.log(counter.value()); // logs 0 // 實現了內部屬性的獲取
counter.changeValue(2);// 實現了內部的changeBy()方法
counter.changeValue(10); 
console.log(counter.value()); // logs 12
counter.changeValue(-5);
console.log(counter.value()); // logs 7

counter對外暴露的方法就是 counter.changeValue, counter.value,而內部屬性 privateCounter 和 內部方法 changeBy 被隔離開了，只能通過外部方法來調用。
同時我們也可以定義多個 counter，其內部屬性也是相互隔離的。
var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }  
};

var counter1 = makeCounter();
var counter2 = makeCounter();
alert(counter1.value()); /* Alerts 0 */
counter1.increment();
counter1.increment();
alert(counter1.value()); /* Alerts 2 */
counter1.decrement();
alert(counter1.value()); /* Alerts 1 */
alert(counter2.value()); /* Alerts 0 */

GPU云服務器云服務器 js閉包的理解 js閉包 js面試閉包如何回答 js閉包qq空間

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94312.html

JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網絡基礎知識之 HTTP 協議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0
《你不知道的JS》讀書筆記---作用域及閉包

摘要：注此讀書筆記只記錄本人原先不太理解的內容經過閱讀你不知道的后的理解。作用域及閉包基礎，代碼運行的幕后工作者引擎及編譯器。注：此讀書筆記只記錄本人原先不太理解的內容經過閱讀《你不知道的JS》后的理解。作用域及閉包基礎，JS代碼運行的幕后工作者：引擎及編譯器。引擎負責JS程序的編譯及執行，編譯器負責詞法分析和代碼生成。那么作用域就像一個容器，引擎及編譯器都從這里提取東西。 ...

denson 2019-08-21 18:22 評論0 收藏0
[學習筆記] JavaScript 閉包

摘要：但是，必須強調，閉包是一個運行期概念。通過原型鏈可以實現繼承，而與閉包相關的就是作用域鏈。常理來說，一個函數執行完畢，其執行環境的作用域鏈會被銷毀。所以此時，的作用域鏈雖然銷毀了，但是其活動對象仍在內存中。學習Javascript閉包（Closure）javascript的閉包JavaScript 閉包深入理解(closure)理解 Javascript 的閉包JavaScript ...

sunsmell 2019-08-21 10:33 評論0 收藏0
JS學習筆記——閉包

摘要：什么是閉包定義我所理解的閉包就是，即使外部函數已經運行完畢，內部函數仍能訪問外部函數的作用域中的變量。閉包的應用場景私有變量模塊需求只能通過函數提供的方法訪問函數內部的變量隱藏。為什么閉包很重要參考資料征服面試什么是閉包 1. 什么是閉包 MDN定義：Closures are functions that refer to independent (free) variables (v...

Karuru 2019-08-20 14:12 評論0 收藏0
前端學習筆記之閉包——看了一張圖終于明白啥是閉包了

摘要：在一個閉包環境內修改變量值，不會影響另一個閉包中的變量。直到看到函數閉包閉包這篇文章的代碼一部分，終于明白其中的邏輯了。閉包閉包定義：指擁有多個變量和綁定了這些變量的環境的表達式（通常是一個函數），因而這些變量也是該表達式的一部分。函數內部可以直接讀取全局變量。函數內部變量無法在函數外部訪問。函數內部聲明要用var或者let聲明，不然會變成全局變量鏈式作用域：子對象會一級級向上尋找...

andycall 2019-08-22 17:18 評論0 收藏0