卡卡網(wǎng)

本文將介紹什么是閉包，和使用閉包的原因，以及閉包的工作方式，結(jié)合示例詳細(xì)了解閉包在JavaScript中的作用。

什么是閉包，為什么要使用閉包？

閉包是外部函數(shù)內(nèi)部的內(nèi)部函數(shù)。它們有自己的局部作用域，可以訪問(wèn)外部函數(shù)的作用域、參數(shù)（但不是參數(shù)對(duì)象），還可以訪問(wèn)全局變量。

我們使用閉包的原因是因?yàn)?Javascript 是函數(shù)級(jí)范圍，而不是與其他語(yǔ)言一樣是塊級(jí)范圍。另外， Javascript 是異步/事件驅(qū)動(dòng)語(yǔ)言，經(jīng)常使用閉包的例子是 jQuery（例如 click()）。

閉包是如何工作的？

閉包的工作方式：

1. 在其外層函數(shù)執(zhí)行完畢并返回值后，閉包仍然可以運(yùn)行。
2. 閉包存儲(chǔ)對(duì)外部函數(shù)變量的引用，因此，我們將始終可以訪問(wèn)外部函數(shù)變量的更新值。
3. 因?yàn)槲覀兛梢栽L問(wèn)外部函數(shù)變量的更新值，當(dāng)變量通過(guò) for 循環(huán)更改時(shí)，我們將遇到問(wèn)題/錯(cuò)誤，但這可以通過(guò)使用 IIFE（立即調(diào)用函數(shù)表達(dá)式）來(lái)解決。

閉包的示例代碼

下面是在 IIFE 中使用閉包的示例代碼。

注意，IIFE 或立即調(diào)用函數(shù)表達(dá)式是另一個(gè) Javascript 概念。

/*
 這段代碼的目標(biāo)是能夠?yàn)槊總€(gè)博客帖子生成唯一的id
 使用閉包和IIFE（立即調(diào)用函數(shù)表達(dá)式），通過(guò)聲明外部函數(shù)并使用[]訪問(wèn)特定帖子
*/

// 這里，我們創(chuàng)建一個(gè)以json格式保存示例數(shù)據(jù)的變量
var blogPost = [
{
  title: 'title0',
  id: 0 },

{
  title: 'title1',
  id: 0 },

{
  title: 'title2',
  id: 0 }
];

/*
  我們將創(chuàng)建一個(gè)函數(shù)，為博客帖子生成唯一id
  此函數(shù)接受post參數(shù)（我們將在此處傳遞blogPost json數(shù)據(jù)）
*/
function generateBlogPostID(thePost) {
  var uniqueID = 100; // 這將保存從for循環(huán)和閉包生成的唯一id

  // 這個(gè)for循環(huán)將遍歷blogPost json var中的每個(gè)項(xiàng)目
  for (var i = 0; i < thePost.length; i++) {
    /* 
      我們?cè)L問(wèn)每個(gè)blogPost項(xiàng)目的id
      并為每個(gè)blogPost項(xiàng)目id分配一個(gè)閉包函數(shù)
    */
    thePost[i]['id'] = function (j) {// j參數(shù)變量是我在調(diào)用IIFE（立即調(diào)用函數(shù)表達(dá)式）時(shí)傳入的
      return uniqueID + j; // for循環(huán)的每次迭代都會(huì)將i的當(dāng)前值傳遞到IIFE（立即調(diào)用函數(shù)表達(dá)式）中，并將正確的值保存到數(shù)組中
    }(i); // 立即調(diào)用此函數(shù)，將i變量作為參數(shù)傳遞
  }

  return thePost;
}

// 現(xiàn)在我們開(kāi)始測(cè)試
var createIDforBlogPost = generateBlogPostID(blogPost);

var blog0 = createIDforBlogPost[0];
console.log(blog0.id);  // 100

var blog1 = createIDforBlogPost[1];
console.log(blog1.id);  // 101

var blog2 = createIDforBlogPost[2];
console.log(blog2.id);  // 102

demodownload

輸出

100
101
102

代碼解釋

這段代碼的目標(biāo)是能夠?yàn)槊總€(gè)博客帖子生成唯一的id，使用閉包和IIFE（立即調(diào)用函數(shù)表達(dá)式），通過(guò)聲明外部函數(shù)并使用[]訪問(wèn)特定帖子。

1、var blogPost 是我們創(chuàng)建一個(gè)以json格式保存示例數(shù)據(jù)的變量。

2、function generateBlogPostID(thePost) 是我們創(chuàng)建的一個(gè)函數(shù)，為博客帖子生成唯一id，此函數(shù)接受post參數(shù)（我們將在此處傳遞blogPost json數(shù)據(jù)）。

3、var uniqueID = 100; 這將保存從for循環(huán)和閉包生成的唯一id。

4、for (var i = 0; i < thePost.length; i++) 這個(gè)for循環(huán)將遍歷blogPost json var中的每個(gè)項(xiàng)目。

5、閉包的使用

thePost[i]['id'] = function (j) 
      return uniqueID + j; 
}(i);

• 我們?cè)L問(wèn)每個(gè)blogPost項(xiàng)目的id，并為每個(gè)blogPost項(xiàng)目id分配一個(gè)閉包函數(shù)。
• j參數(shù)變量是在調(diào)用IIFE（立即調(diào)用函數(shù)表達(dá)式）時(shí)傳入的。
• for循環(huán)的每次迭代都會(huì)將i的當(dāng)前值傳遞到IIFE（立即調(diào)用函數(shù)表達(dá)式）中，并將正確的值保存到數(shù)組中。
• (i) 表示立即調(diào)用此函數(shù)，將i變量作為參數(shù)傳遞。

6、console.log(blog0.id); 輸出得到的id。

總結(jié)

本文介紹了什么是閉包，和使用閉包的原因，以及閉包的工作方式，結(jié)合一個(gè)示例的分析，通過(guò)本文的學(xué)習(xí)，你應(yīng)該對(duì)閉包的認(rèn)識(shí)更進(jìn)一步。

您可能對(duì)以下文章也感興趣

• 新手指南：理解JS中的箭頭函數(shù)和常規(guī)函數(shù)
• 不能使用箭頭函數(shù)的6種情況
• [實(shí)例]演示區(qū)別箭頭函數(shù)和常規(guī)函數(shù)的this值
• 箭頭函數(shù)=>不能換行？大括號(hào){}這種情況下可以不要
• 實(shí)例演示無(wú)參數(shù)、單參數(shù)、多參數(shù)的箭頭函數(shù)用法
• 實(shí)例詳解JS箭頭函數(shù)=>與傳統(tǒng)匿名函數(shù)處理this的不同方法
• JavaScript檢查對(duì)象是否數(shù)組的最快方法
• 詳細(xì)介紹5種方法檢查JavaScript對(duì)象是否數(shù)組

• [示例]詳解JSON和XML的相似及區(qū)別之處
• 5個(gè)示例介紹如何在JS中解構(gòu)數(shù)組和對(duì)象
• 兩種簡(jiǎn)潔又安全的JS遍歷對(duì)象屬性的寫(xiě)法
• 5種方法檢查JS對(duì)象中是否存在某個(gè)鍵(屬性)
• 3種方法JS和jQuery判斷對(duì)象是否為空
• 3種方法判斷JS對(duì)象是否具有某一屬性
• 【如何合理使用】JavaScript訪問(wèn)對(duì)象屬性的3種方法
• 【實(shí)例】演示2種方法JS從對(duì)象中刪除屬性

標(biāo)簽: 閉包