真正了解Javascript闭包

最新推荐文章于 2024-11-01 14:48:20 发布

danpu0978

最新推荐文章于 2024-11-01 14:48:20 发布

阅读量1.6k

点赞数

文章标签： java js javascript python 数据库 ViewUI

这篇文章将以简单的方式说明Javascript闭包的工作方式。我们将讨论以下主题和常见问题：

什么是Javascript闭包
“关闭”这个名称的背后是什么原因
实际在调试器中查看闭包
编码时如何推理闭包
使用中最常见的陷阱

一个简单的例子（包括错误）

理解闭包的最简单方法是了解它们试图解决的问题。让我们以一个简单的代码示例为例，其中一个计数器在循环内递增3次。

但是在循环内部，计数器完成了一些异步操作。可能是服务器调用了，在这种情况下，我们简单地调用setTimeout ，它将延迟其执行直到发生超时：

// define a function that increments a counter in a loop
function closureExample() {

    var i = 0;

    for (i = 0; i< 3 ;i++) {    
        setTimeout(function() {
            console.log('counter value is ' + i);
        }, 1000);
    }

}
// call the example function
closureExample();

请记住以下几点：

变量i存在于closureExample函数的范围内，并且无法从外部访问
在循环变量时，不会立即执行console.log语句
console/log将异步执行3次，并且仅在每次超时1秒后执行
这意味着设置了3个超时，然后closureExample几乎立即返回

这使我们想到了有关此代码的主要问题：

执行匿名日志记录功能后，如何访问变量“ i”？

记住这个问题：

我没有作为参数传递的变量
执行console.log statement时， closureExample函数已结束。

那么什么是闭包呢？

当将日志记录函数传递给setTimeout方法时，Javascript引擎将检测到要在将来执行的函数，需要对变量i进行引用。

为了解决这个问题，引擎保留了一个指向该变量的链接以供以后使用，并将该链接存储在特殊的函数范围内的执行上下文中。

这种具有关于创建环境的“内存”功能的函数简称为： Closure 。

为什么叫闭包呢？

这是因为该函数检查其环境并关闭需要记住以供将来使用的变量。变量的引用在特殊的数据结构中关闭，该数据结构只能由Javascript运行时本身访问。

有什么办法可以看到关闭？

最简单的方法是使用Chrome开发者工具调试器，并在上述代码段的第7行中设置一个断点。

当第一次超时发生时，关闭将显示在调试器的“作用域变量”面板中：

如我们所见，闭包只是一个简单的数据结构，具有指向函数需要“记住”的变量（在本例中为i变量）的链接。

但是，陷阱在哪里？

我们可以预期执行日志将显示：

counter value is 0
counter value is 1
counter value is 2

但是实际的执行日志实际上是：

counter value is 3
counter value is 3
counter value is 3

这不是错误，而是闭包的工作方式。记录功能是一个封闭件（或具有闭合，如该术语在以两种方式使用）包含到第i变量的引用。

这是参考，而不是副本，因此发生的情况是：

循环结束并且i变量值为3
只有稍后，第一次超时才会过期，并且日志记录功能将记录值3
第二次超时到期，并且日志记录功能仍记录3，依此类推。

每个异步操作如何具有不同的计数器值？

例如，可以通过创建一个单独的函数来触发异步操作来完成此操作。以下代码片段将给出预期的结果：

function asyncOperation(counter) {  
    setTimeout(function() {
        console.log('counter value is ' + counter);
    }, 1000);
}

function otherClosureExample() {  
    var i = 0;

    for (i = 0; i < 3 ;i++) {    
        asyncOperation(i);
    }
}

otherClosureExample();

之所以asyncOperation是因为在调用asyncOperation将复制计数器值，并且日志记录将“覆盖”该复制的值。这意味着每次调用日志记录功能都会看到一个值分别为0、1、2的变量。