【JavaScript】闭包笔记

最新推荐文章于 2025-04-05 20:55:33 发布

Yvette-W

最新推荐文章于 2025-04-05 20:55:33 发布

阅读量515

点赞数 10

分类专栏： JavaScript 文章标签： javascript 笔记开发语言 ecmascript 前端

本文链接：https://blog.youkuaiyun.com/YvetW/article/details/146576437

版权

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

闭包是什么？

定义

闭包（Closure）是指函数可以访问其外部函数作用域中的变量。当一个函数在其外部函数的作用域内被调用时，它会“记住”外部作用域的变量，并且可以在函数外部依然访问到这些变量。

为什么叫闭包？

“闭” 代表封闭（封装作用域）
闭包可以“封闭”住外部作用域的变量，使得这些变量在外部函数执行结束后依然可以被访问。
这个“封闭”的概念，表达了变量不会被外部直接访问，但在闭包内部仍然可用。

“包” 代表包含（返回的函数“包住”作用域）
闭包不仅仅是“封闭”作用域，还要有一个函数能够访问这个作用域，相当于“打包”了作用域和代码。

闭包 = 封闭作用域 + 返回函数

闭包的例子

虽然闭包常见的例子是函数返回函数的情况，但外部不一定是函数，我们可以通过不同的方式实现闭包。重要的是，闭包总是能够访问它的外部作用域，无论外部作用域是函数、对象还是其他任何结构。

函数返回函数（经典闭包）

function greeting(msg) {
    return function(name) {
        console.log(`${msg}, ${name}!`);
    };
}

const sayHello = greeting("Hello");
const sayHi = greeting("Hi");

sayHello("Alice"); // Hello, Alice!
sayHi("Bob");      // Hi, Bob!

解释：
- greeting 函数返回一个内部的函数 who，这个内部函数可以访问 msg。
- 当 greeting("Hello") 被调用时，msg 被绑定为 "Hello"，并返回 sayHello 函数实例。
- 每次调用 greeting 都返回一个新的函数实例，它们各自有独立的 msg 值（即形成了不同的闭包）。

外部为对象，形成闭包

const counter = {
    value: 0,
    increment() {
        this.value++;
        console.log(this.value);
    }
};

counter.increment(); // 1
counter.increment(); // 2

解释：
- 这里 increment 是对象 counter 中的方法，它访问对象的 value 属性。
- 这里的闭包体现在 increment 方法内部可以访问并操作 counter 对象的 value。
- 即使外部是对象而不是函数，increment 依然可以访问并修改 value，它形成了闭包。

外部为外部作用域（非函数）

let externalValue = 10;

const closureExample = () => {
    console.log(externalValue);  // 外部作用域的变量
};

externalValue = 20;
closureExample(); // 20

解释：
- 在这个例子中，闭包 closureExample 访问了外部的变量 externalValue，而 externalValue 不在函数的作用域中，而是全局作用域。
- 即便 externalValue 被修改，闭包依然能够访问最新的值。这里的闭包依然成立，只是外部作用域的类型不同。

for 循环中的闭包

for (let i = 1; i <= 3; i++) {
    setTimeout(() => {
        console.log(i);
    }, 1000);
}
// 1
// 2
// 3

for (let [idx,btn] of buttons.entries()) {
    btn.addEventListener("click",function onClick(){
       console.log(`Clicked on button (${ idx })!`);
    });
}

解释：
- setTimeout 中的箭头函数访问了 for 作用域里的 i，形成闭包。
- 由于 let 具有块级作用域，i 在每次循环都会创建新的作用域，闭包绑定的是当前循环的 i 值。

处理异步回调函数

function getSomeData(url) {
    ajax(url,function onResponse(resp){
        console.log(
            `Response (from ${ url }): ${ resp }`
        );
    });
}

getSomeData("https://some.url/wherever");
// Response (from https://some.url/wherever): ...