深入理解 Javascript 之閉包

everfly 發布于2019-08-23 10:51 / 1473人閱讀

摘要：閉包一認識閉包閉包是一種特殊的對象。它由兩部分構成函數，以及創建該函數的環境包含自由變量。環境由閉包創建時在作用域中的任何局部變量組成。創建閉包最常見方式，就是在一個函數內部創建另一個函數。

閉包

一、認識閉包

閉包是一種特殊的對象。它由兩部分構成：函數，以及創建該函數的環境(包含自由變量)。環境由閉包創建時在作用域中的任何局部變量組成。

二、閉包的產生

function f() {
  var a = 2;
  var b = 3;
  function g(){
    console.log(a);
  }  
  g();
}
f();

這就形成了一個閉包，函數g以及其所在的環境以及其中的自由變量就組成了一個閉包。

創建閉包最常見方式，就是在一個函數內部創建另一個函數。下面例子中的 closure 也是一個閉包：

function func(){
  var a = 1,b = 2;
  
  function closure(){
    return a+b;
  }
  return closure;
}

下面也是一個閉包

function f1() {
  var a = 10;
  var b = 20;
  return function g() {
    console.log(a);
  }
}

var result = f1;
result()(); // 10

三、閉包的好處

實例 1 累加【減少全局變量個數】

function add () {
  var a  = 0;
  return function () {
    a++;
    alert(a);
  }
}

var result = add();
result(); // 1
result(); // 2

實例 2 【減少傳遞參數的個數】

function callFac(base) {
  return function (max) {
    var total = 0;
    for(var i = 1; i <= max; i++) {
      total+=i;
    }
    return total + base;
  }
}

var result = callFac(2);
result(3); // 8

實例 2 【封裝】

(function () {
  var a = 0;
  function getM() {
    rerurn a;
  }
  function setM(val) {
    a = val;
  }
  window.g = getM;
  window.s = setM;
})();

s(3);

三、閉包的注意點

1、對捕獲的變量只是個引用，不是復制

function f() {
  var num = 0;
  function g () {
    alert(num); // 這里使用的是引用
  }
  num ++;
  g(); // 在調用執行之前就已經加 1了
} 
f();

2、每調用一次父函數，就會產生一個新的閉包

function f() {
  var num = 1;
  return function () {
    num++;
    alert(num);
  }
}

var result1 = f();
result1(); // 2
result1(); // 3

var result2 = f();
result2(); // 2
result2(); // 3

3. 循環


    1
    2
    3
  
  

  // 結果是無論點擊那個，都是彈出4

// 解決辦法

    1
    2
    3

GPU云服務器云服務器深入理解webrtc之aec 深入理解javascript js閉包的理解深入理解系列

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

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

【進階2-2期】JavaScript深入之從作用域鏈理解閉包

摘要：使用上一篇文章的例子來說明下自由變量進階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數，也不是局部變量，所以是自由變量。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第7天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計...

simpleapples 2019-08-23 13:47 評論0 收藏0
【進階2-3期】JavaScript深入之閉包面試題解

摘要：閉包面試題解由于作用域鏈機制的影響，閉包只能取得內部函數的最后一個值，這引起的一個副作用就是如果內部函數在一個循環中，那么變量的值始終為最后一個值。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第8天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了...

alanoddsoff 2019-08-23 13:47 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
深入淺出Javascript：面向對象之閉包

摘要：理解閉包概念閉包是指有權訪問另一個函數作用域中的變量的函數。閉包在執行后，仍然可以訪問內部的，因為將的內的活動對象添加到了的作用域鏈。閉包的應用監聽事件事件錯誤的使用循環使用閉包封裝函數，便于使用私有變量。理解閉包概念閉包是指有權訪問另一個函數作用域中的變量的函數。函數式閉包（在內部保存數據和對外部無副作用）創建方法在一個函數內部創建另一個函數（閉包）原理普通函數：...

instein 2019-08-19 18:12 評論0 收藏0
【進階1-4期】JavaScript深入之帶你走進內存機制

摘要：引擎對堆內存中的對象進行分代管理新生代存活周期較短的對象，如臨時變量字符串等。內存泄漏對于持續運行的服務進程，必須及時釋放不再用到的內存。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第4天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計劃...

不知名網友 2019-08-23 13:47 評論0 收藏0