js中的閉包學習心得

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

這篇文章主要介紹了js中的閉包學習心得以及重要點的代碼寫法，對此有興趣的朋友跟著小編一起學習下吧。

閉包

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

例如：

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

當函數(shù)可以記住并訪問它所在的作用域鏈時，就產(chǎn)生了閉包當然，大部分的閉包都不是這么直觀的，因為子函數(shù)的調用是可以在父函數(shù)之外的，例如：

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

通過以上代碼，我們也可以看出一個閉包的好處，就是我們再全局作用域（此處是widow）下訪問到了局部作用域(a函數(shù))的作用域的值，按正常的詞法作用域是無法這么做的，但是當我們使用閉包是就可以了。然后我們再看一點我們平時寫的比較多的：

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ù)內部調用子函數(shù)，或者通過何種手段將內部函數(shù)傳遞到所在的詞法作用域以外，它都會持有對原始定義作用域的引用，無論在何處執(zhí)行這個函數(shù)都會使用閉包。

您可能感興趣的文章:

js
閉包

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