3分钟了解JavaScript闭包的概念

技术频道 - js技术

3分钟了解JavaScript闭包的概念

作者:admin 时间:2022-6-7 23:41:0 浏览:

大多数 JavaScript 教程只是深入探讨 JavaScript 基础知识，例如值或变量，并没有真正深入讨论闭包和作用域。尽管它们被忽视了，但作用域和闭包是 JavaScript 的基础知识。

在这篇文章中，对于熟悉 JavaScript 的人和新手来说，闭包的概念都尽可能地简洁明了，并且在 3 分钟的阅读时间内就结束了。

3分钟了解JavaScript闭包的概念

什么是闭包？

在一个不太专业的定义中，闭包只是在函数范围内引用另一个函数中的变量的行为。当函数在函数内部声明时，内部函数可以引用在外部函数中声明的变量。

看看这段代码，这里形成了一个闭包：

// 外部函数
function greet() {
   var name = "WebKaka";
    // 内部函数
    function displayName() {
        console.log('Hi' + ' ' + name);
    }
 
    // 调用内部函数
    displayName();
}
 
// 调用外部函数
greet();

输出

Hi WebKaka

闭包尊重范围。从不同函数声明的变量完全不能在其兄弟计数器部分中引用，因为它在范围之外。

闭包对变量的调用限制

JavaScript中的闭包带来了变量的限制，JavaScript 想让你编写一个有条理的干净代码，这就是考虑闭包的原因。不仅仅是在任何地方分配任何变量并在任何地方调用它。这样你可能会变得非常混乱，甚至忘记哪个变量属于哪个函数。

考虑下面的代码：

// 外部函数
function greet() {
   var name = "WebKaka";
    // 内部函数
    function displayName() {
        alert(name);
    }
    // 调用内部函数
    displayName();
}
// 调用外部函数
greet();

// 外部函数
function greeting() {
   var myName = "卡卡网";
    // 内部函数
    function displayName() {
        alert(name);
    }
    // 调用内部函数
    displayName();
}
// 调用外部函数
greeting();

greeting 函数中的 alert 方法不会执行其功能，因为它试图从其范围之外的同级函数调用“var name”。除非它从其父函数调用“var name”，否则它将无法执行其功能。如改为下面的写法，greeting函数中的alert方法就能执行其功能：

// 外部函数
function greet() {
   var name = "WebKaka";
    // 内部函数
    function displayName() {
        //alert(name);
    }
    // 调用内部函数
    displayName();


   function greeting() {
      var myName = "卡卡网";
      function displayName() {
         alert(name);
      }
      displayName();
   }
   greeting();
    
}
// 调用外部函数
greet();