JavaScript闭包原理及作用详解

目录

简介(newName){name = newName;}}}(); console.log(person.name);console.log(person.getName());person.setName("Hello");console.log(person.getName());

结果

undefined

defaultName

Hello

闭包的原理

以计数器为例：

function makeCounter() {let count = 0;return function() {return count++;};}let counter = makeCounter();console.log(counter());console.log(counter());console.log(counter());

结果

0

1

2

每次 makeCounter() 调用的开始，都会创建一个新的词法环境对象，以存储该makeCounter 运行时的变量。

因此，我https://www.easck.com/们有两层嵌套的词法环境：

仅在至少有一个嵌套函数引用它时才存在。

在下面的代码中，嵌套函数被删除后，其封闭的词法环境（以及其中的 value ）也会被从内存中删除：

function f() {    let value = 123;    return function() {        alert(value);    }} let g = f(); // 当 g 函数存在时，该值会被保留在内存中g = null;    // 现在内存被清理了

实际开发中的优化

正如我们所看到的，理论上当函数可达时，它外部的所有变量也都将存在。但在实际中，JavaScript 引擎会试图优化它。它们会分析变量的使用情况，如果从代码中可以明显看出有未使用的外部变量，那么就会将其删除。

V8（Chrome，Opera）的一个重要的副作用是，此类变量在调试中将不可用。

打开 Chrome 浏览器的开发者工具，并尝试运行下面的代码。

    function f() {        let value = Math.random();        function g() {            debugger;        }        return g;    }     let g = f();    g();

当代码执行到“debugger;”这个地方时会暂停，此时在控制台中输入 console.log(value);。

结果：报错：VM146:1 Uncaught ReferenceError: value is not defined

这可能会导致有趣的调试问题。比如：我们可以看到的是一个同名的外部变量，而不是预期的变量：

let value = "Surprise!";function f() {    let value = "the closest value";    function g() {        debugger;    }    return g;}let g = f();g();

当代码执行到“debugger;”这个地方时会暂停，此时在控制台中输入 console.log(value);。

结果：输出：Surprise。

以上就是JavaScript闭包原理及作用详解的详细内容，更多关于JavaScript闭包的资料请关注我们其它相关文章！