卡卡網(wǎng)

大多數(shù) JavaScript 教程只是深入探討 JavaScript 基礎(chǔ)知識(shí)，例如值或變量，并沒(méi)有真正深入討論閉包和作用域。盡管它們被忽視了，但作用域和閉包是 JavaScript 的基礎(chǔ)知識(shí)。

在這篇文章中，對(duì)于熟悉 JavaScript 的人和新手來(lái)說(shuō)，閉包的概念都盡可能地簡(jiǎn)潔明了，并且在 3 分鐘的閱讀時(shí)間內(nèi)就結(jié)束了。

什么是閉包？

在一個(gè)不太專業(yè)的定義中，閉包只是在函數(shù)范圍內(nèi)引用另一個(gè)函數(shù)中的變量的行為。當(dāng)函數(shù)在函數(shù)內(nèi)部聲明時(shí)，內(nèi)部函數(shù)可以引用在外部函數(shù)中聲明的變量。

看看這段代碼，這里形成了一個(gè)閉包：

// 外部函數(shù)
function greet() {
   var name = "WebKaka";
    // 內(nèi)部函數(shù)
    function displayName() {
        console.log('Hi' + ' ' + name);
    }
 
    // 調(diào)用內(nèi)部函數(shù)
    displayName();
}
 
// 調(diào)用外部函數(shù)
greet();

輸出

Hi WebKaka

閉包尊重范圍。從不同函數(shù)聲明的變量完全不能在其兄弟計(jì)數(shù)器部分中引用，因?yàn)樗诜秶狻?/p>

閉包對(duì)變量的調(diào)用限制

JavaScript中的閉包帶來(lái)了變量的限制，JavaScript 想讓你編寫(xiě)一個(gè)有條理的干凈代碼，這就是考慮閉包的原因。不僅僅是在任何地方分配任何變量并在任何地方調(diào)用它。這樣你可能會(huì)變得非常混亂，甚至忘記哪個(gè)變量屬于哪個(gè)函數(shù)。

考慮下面的代碼：

// 外部函數(shù)
function greet() {
   var name = "WebKaka";
    // 內(nèi)部函數(shù)
    function displayName() {
        alert(name);
    }
    // 調(diào)用內(nèi)部函數(shù)
    displayName();
}
// 調(diào)用外部函數(shù)
greet();

// 外部函數(shù)
function greeting() {
   var myName = "卡卡網(wǎng)";
    // 內(nèi)部函數(shù)
    function displayName() {
        alert(name);
    }
    // 調(diào)用內(nèi)部函數(shù)
    displayName();
}
// 調(diào)用外部函數(shù)
greeting();

greeting 函數(shù)中的 alert 方法不會(huì)執(zhí)行其功能，因?yàn)樗噲D從其范圍之外的同級(jí)函數(shù)調(diào)用“var name”。除非它從其父函數(shù)調(diào)用“var name”，否則它將無(wú)法執(zhí)行其功能。如改為下面的寫(xiě)法，greeting函數(shù)中的alert方法就能執(zhí)行其功能：

// 外部函數(shù)
function greet() {
   var name = "WebKaka";
    // 內(nèi)部函數(shù)
    function displayName() {
        //alert(name);
    }
    // 調(diào)用內(nèi)部函數(shù)
    displayName();


   function greeting() {
      var myName = "卡卡網(wǎng)";
      function displayName() {
         alert(name);
      }
      displayName();
   }
   greeting();
    
}
// 調(diào)用外部函數(shù)
greet();

執(zhí)行結(jié)果

唯一不真正尊重閉包的變量是全局變量，它們通常在編程環(huán)境的頂部聲明，這種變量即使在程序中的任何地方聲明，它們也被視為在程序的開(kāi)頭聲明，并且可以被環(huán)境中的任何函數(shù)調(diào)用。

閉包的概念允許你閱讀程序流，考慮變量之間的關(guān)系以及在指定范圍內(nèi)可能調(diào)用或引用的變量。

關(guān)鍵要點(diǎn)：

• 閉包是 JavaScript 的支柱之一。
• 每次聲明一個(gè)函數(shù)時(shí)，都會(huì)創(chuàng)建一個(gè)閉包。
• 閉包是范圍限制的，因此它鼓勵(lì)塊范圍或變量限制。

總結(jié)

本文通過(guò)簡(jiǎn)單實(shí)例，介紹了JavaScript閉包的概念，以及了解何時(shí)可以使用閉包，何時(shí)不使用閉包。

相關(guān)文章

• 借助5示例理解JavaScript閉包
• 一個(gè)示例一行行代碼理解JS閉包是如何執(zhí)行的
• 3個(gè)示例說(shuō)明JavaScript閉包為什么有用
• 從基本術(shù)語(yǔ)開(kāi)始，4步完成對(duì)JavaScript閉包的理解
• 4個(gè)示例解釋何為JS閉包及何時(shí)使用閉包
• [實(shí)例]分析JS閉包如何導(dǎo)致內(nèi)存泄漏以及如何防止它
• [5個(gè)示例]介紹在循環(huán)中創(chuàng)建閉包的常見(jiàn)錯(cuò)誤及解決方法
• 一個(gè)示例，就能讓你了解JS閉包的功能作用是什么
• JS面試問(wèn)題：什么是閉包，你為什么要使用閉包

標(biāo)簽: 閉包