深入理解 Javascript 之閉包

everfly 發(fā)布于2019-08-23 10:51 / 1530人閱讀

摘要：閉包一認(rèn)識(shí)閉包閉包是一種特殊的對(duì)象。它由兩部分構(gòu)成函數(shù)，以及創(chuàng)建該函數(shù)的環(huán)境包含自由變量。環(huán)境由閉包創(chuàng)建時(shí)在作用域中的任何局部變量組成。創(chuàng)建閉包最常見方式，就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。

閉包

一、認(rèn)識(shí)閉包

閉包是一種特殊的對(duì)象。它由兩部分構(gòu)成：函數(shù)，以及創(chuàng)建該函數(shù)的環(huán)境(包含自由變量)。環(huán)境由閉包創(chuàng)建時(shí)在作用域中的任何局部變量組成。

二、閉包的產(chǎn)生

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

這就形成了一個(gè)閉包，函數(shù)g以及其所在的環(huán)境以及其中的自由變量就組成了一個(gè)閉包。

創(chuàng)建閉包最常見方式，就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。下面例子中的 closure 也是一個(gè)閉包：

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

下面也是一個(gè)閉包

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

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

三、閉包的好處

實(shí)例 1 累加【減少全局變量個(gè)數(shù)】

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

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

實(shí)例 2 【減少傳遞參數(shù)的個(gè)數(shù)】

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

實(shí)例 2 【封裝】

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

s(3);

三、閉包的注意點(diǎn)

1、對(duì)捕獲的變量只是個(gè)引用，不是復(fù)制

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

2、每調(diào)用一次父函數(shù)，就會(huì)產(chǎn)生一個(gè)新的閉包

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. 循環(huán)


    1
    2
    3
  
  

  // 結(jié)果是無論點(diǎn)擊那個(gè)，都是彈出4

// 解決辦法

    1
    2
    3

GPU云服務(wù)器云服務(wù)器深入理解webrtc之a(chǎn)ec 深入理解javascript js閉包的理解深入理解系列

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96752.html

相關(guān)文章

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

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

simpleapples 2019-08-23 13:47 評(píng)論0 收藏0
【進(jìn)階2-3期】JavaScript深入之閉包面試題解

摘要：閉包面試題解由于作用域鏈機(jī)制的影響，閉包只能取得內(nèi)部函數(shù)的最后一個(gè)值，這引起的一個(gè)副作用就是如果內(nèi)部函數(shù)在一個(gè)循環(huán)中，那么變量的值始終為最后一個(gè)值。（關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）本周正式開始前端進(jìn)階的第二期，本周的主題是作用域閉包，今天是第8天。本計(jì)劃一共28期，每期重點(diǎn)攻克一個(gè)面試重難點(diǎn)，如果你還不了...

alanoddsoff 2019-08-23 13:47 評(píng)論0 收藏0
JavaScript深入淺出

摘要：理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型，雖然這經(jīng)常被當(dāng)作缺點(diǎn)提及，但是只要善于運(yùn)用，其實(shí)基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。中文指南基本操作指南二繼續(xù)熟悉的幾對(duì)方法，包括，，。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。怎樣使用 this 因?yàn)楸救藢儆趥吻岸?，因此文中只看懂?8 成左右，希望能夠給大家?guī)韼椭?...（據(jù)說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評(píng)論0 收藏0
深入淺出Javascript：面向?qū)ο?em>之閉包

摘要：理解閉包概念閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。閉包在執(zhí)行后，仍然可以訪問內(nèi)部的，因?yàn)閷⒌膬?nèi)的活動(dòng)對(duì)象添加到了的作用域鏈。閉包的應(yīng)用監(jiān)聽事件事件錯(cuò)誤的使用循環(huán)使用閉包封裝函數(shù)，便于使用私有變量。理解閉包概念閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。函數(shù)式閉包（在內(nèi)部保存數(shù)據(jù)和對(duì)外部無副作用）創(chuàng)建方法在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)（閉包）原理普通函數(shù)：...

instein 2019-08-19 18:12 評(píng)論0 收藏0
【進(jìn)階1-4期】JavaScript深入之帶你走進(jìn)內(nèi)存機(jī)制

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

不知名網(wǎng)友 2019-08-23 13:47 評(píng)論0 收藏0