快捷導(dǎo)航

js中的閉包學(xué)習(xí)心得

更新時(shí)間：2018年02月06日 08:54:12 投稿：laozhang

這篇文章主要介紹了js中的閉包學(xué)習(xí)心得以及重要點(diǎn)的代碼寫(xiě)法，對(duì)此有興趣的朋友跟著小編一起學(xué)習(xí)下吧。

閉包

按中文的意思就是關(guān)上一個(gè)包的意思。如果我們把函數(shù)的作用域當(dāng)做是一個(gè)包的話，那這個(gè)詞很形象體現(xiàn)了它的作用。函數(shù)的正常的執(zhí)行流程是當(dāng)函數(shù)中的語(yǔ)句執(zhí)行完后，程序會(huì)自動(dòng)銷(xiāo)毀這個(gè)函數(shù)的作用域，但是當(dāng)一個(gè)函數(shù)中聲明了另一個(gè)函數(shù)，并且這個(gè)子函數(shù)執(zhí)行時(shí)存在引用父函數(shù)的變量，就會(huì)形成閉包，形象點(diǎn)說(shuō)就相當(dāng)于把父函數(shù)的作用域給關(guān)閉了起來(lái)，不讓程序去銷(xiāo)毀它。

例如：

function a() {
  var name = "xuxu";
  function b() {
    console.log(name);
  }
  // 此處產(chǎn)生閉包 
  b();
} 
a();

當(dāng)函數(shù)可以記住并訪問(wèn)它所在的作用域鏈時(shí)，就產(chǎn)生了閉包當(dāng)然，大部分的閉包都不是這么直觀的，因?yàn)樽雍瘮?shù)的調(diào)用是可以在父函數(shù)之外的，例如：

function a() {
  var name = "xuxu";
  function b() {
    console.log(name);
  }
  return b;
} 
var c=a();
// 此處產(chǎn)生閉包 此處的c函數(shù)其實(shí)就是a函數(shù)
c();

通過(guò)以上代碼，我們也可以看出一個(gè)閉包的好處，就是我們?cè)偃肿饔糜颍ù颂幨莣idow）下訪問(wèn)到了局部作用域(a函數(shù))的作用域的值，按正常的詞法作用域是無(wú)法這么做的，但是當(dāng)我們使用閉包是就可以了。然后我們?cè)倏匆稽c(diǎn)我們平時(shí)寫(xiě)的比較多的：

function foo() {
  var a = 2;
  function baz() {
     // 2
    console.log( a ); 
  }
  bar( baz );
}
function bar(fn) {
// 大家快看呀，這就是閉包！
  fn(); 
}

又或者

var fn;
function foo() {
  var a = 2;
  function baz() {
    console.log( a );
  }
  // 將baz分配給全局變量
  fn = baz; 
}
function bar() {
   // 大家快看呀，這就是閉包！
  fn();
}
foo();
// 2
bar();

以上也是閉包，因此在函數(shù)內(nèi)部調(diào)用子函數(shù)，或者通過(guò)何種手段將內(nèi)部函數(shù)傳遞到所在的詞法作用域以外，它都會(huì)持有對(duì)原始定義作用域的引用，無(wú)論在何處執(zhí)行這個(gè)函數(shù)都會(huì)使用閉包。

您可能感興趣的文章:

js
閉包

相關(guān)文章

JavaScript中setInterval的用法總結(jié)
這篇文章主要是對(duì)JavaScript中setInterval的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
根據(jù)對(duì)象的某一屬性進(jìn)行排序的js代碼（如：name,age）
實(shí)例為按降序排列，若想改為升序只需把比較器中的value2-value1改為value1-value2就可以了
2010-08-08
Openlayers+EasyUI Tree動(dòng)態(tài)實(shí)現(xiàn)圖層控制
這篇文章主要為大家詳細(xì)介紹了Openlayers+EasyUI Tree動(dòng)態(tài)實(shí)現(xiàn)圖層控制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
Bootstrap圖片輪播效果詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap圖片輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
JavaScript查看數(shù)據(jù)返回值的方法
console.log()、alert()?都是JavaScript中用于在開(kāi)發(fā)過(guò)程中輸出信息或向用戶顯示消息的不同方法,它們的主要區(qū)別在于目的、使用場(chǎng)景以及展示方式,本文將給大家介紹JavaScript?中怎么看數(shù)據(jù)返回值,需要的朋友可以參考下
2024-07-07
微信小程序?qū)崿F(xiàn)簡(jiǎn)單跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
JS/jQuery實(shí)現(xiàn)獲取時(shí)間的方法及常用類(lèi)完整示例
這篇文章主要介紹了JS/jQuery實(shí)現(xiàn)獲取時(shí)間的方法及常用類(lèi),結(jié)合完整實(shí)例形式分析了javascript針對(duì)日期時(shí)間的獲取、轉(zhuǎn)換、計(jì)算與檢測(cè)相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
基于Echarts實(shí)現(xiàn)餅圖效果
這篇文章主要為大家詳細(xì)介紹了基于Echarts實(shí)現(xiàn)餅圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法
今天小編就為大家分享一篇取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實(shí)例代碼
這篇文章介紹了JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實(shí)例代碼，有需要的朋友可以參考一下
2013-07-07