深入理解JS的执行上下文、词法作用域和闭包(中)

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

三、闭包 🔒
- 闭包的定义和特点
- 如何创建和使用闭包 🚀
- 闭包在实际编程中的应用场景 💡

三、闭包 🔒

闭包的定义和特点

闭包（Closure）是JavaScript中一种重要的概念，它指的是一个函数可以访问其词法作用域中的变量，即使这个函数在其词法作用域之外执行。闭包的主要特点有以下几点：

函数可以记住并访问其词法作用域：当一个函数在其词法作用域之外执行时，它仍然可以访问其词法作用域中的变量。

例如：

function foo() {let a = 1;function bar() {console.log(a); // 输出 1}bar();
}foo();

在这个例子中，bar函数在其词法作用域foo之外执行，但仍然可以访问foo作用域中的变量a。

闭包可以让函数记住并访问其词法作用域，即使这个作用域在函数执行完毕后被销毁：当一个函数在其词法作用域之外执行时，即使这个作用域在函数执行完毕后被销毁，该函数仍然可以访问其词法作用域中的变量。

例如：

function createCounter() {let count = 0;return function() {count += 1;console.log(count); // 输出 1 2 3};
}const counter = createCounter();
counter();
counter();
counter();

在这个例子中，createCounter函数返回一个闭包counter，每次调用counter时，它会访问其词法作用域createCounter中的变量count，即使createCounter函数执行完毕并销毁。

总结：闭包是JavaScript中一种重要的概念，它指的是一个函数可以访问其词法作用域中的变量，即使这个函数在其词法作用域之外执行。闭包的主要特点包括函数可以记住并访问其词法作用域，即使这个作用域在函数执行完毕后被销毁。理解闭包有助于更好地理解JavaScript中的变量作用域和函数调用等问题。

如何创建和使用闭包 🚀

闭包（Closure）是JavaScript中一种重要的概念，它指的是一个函数可以访问其词法作用域中的变量，即使这个函数在其词法作用域之外执行。下面介绍如何创建和使用闭包：

创建闭包：

在JavaScript中，闭包是由函数引用其词法作用域中的变量创建的。当一个函数在其词法作用域之外执行时，它仍然可以访问其词法作用域中的变量。

例如，下面的代码创建了一个闭包：

function foo() {let a = 1;function bar() {console.log(a); // 输出 1}bar();
}foo();

在这个例子中，bar函数在其词法作用域foo之外执行，但仍然可以访问foo作用域中的变量a。

使用闭包：

闭包可以让函数记住并访问其词法作用域，即使这个作用域在函数执行完毕后被销毁。当一个函数在其词法作用域之外执行时，即使这个作用域在函数执行完毕后被销毁，该函数仍然可以访问其词法作用域中的变量。

例如，下面的代码使用了闭包：

function createCounter() {let count = 0;return function() {count += 1;console.log(count); // 输出 1 2 3};
}const counter = createCounter();
counter();
counter();
counter();

总之，闭包是JavaScript中一种重要的概念，它指的是一个函数可以访问其词法作用域中的变量，即使这个函数在其词法作用域之外执行。创建闭包需要函数引用其词法作用域中的变量，使用闭包可以让函数记住并访问其词法作用域，即使这个作用域在函数执行完毕后被销毁。实际项目中，可以根据需求灵活地使用闭包。

闭包在实际编程中的应用场景 💡

闭包在实际编程中有很多应用场景，下面列举几个常见的例子：

模块化：闭包可以用来实现模块化，将一组相关的函数和变量封装在一个函数内部，然后返回这个函数的引用，这样就可以在其他地方调用这些函数并访问它们需要的变量。

例如，使用闭包实现一个简单的模块：

function createCart() {let products = [];function addProduct(product) {products.push(product);}function getProducts() {return products;}return {addProduct,getProducts};
}const cart = createCart();
cart.addProduct({ id: 1, name: 'Product 1' });
console.log(cart.getProducts()); // 输出：[{ id: 1, name: 'Product 1' }]

在这个例子中，createCart函数返回一个闭包，包含addProduct和getProducts函数以及它们需要的变量products。

保持状态：闭包可以用来保持函数内部的状态，即使这个函数在其他地方执行。

例如，使用闭包实现一个简单的计数器：

function createCounter() {let count = 0;return function() {count += 1;console.log(count); // 输出 1 2 3};
}const counter = createCounter();
counter();
counter();
counter();

在这个例子中，createCounter函数返回一个闭包，每次调用counter时，它会访问其词法作用域createCounter中的变量count，即使createCounter函数执行完毕并销毁。

实现柯里化（Currying）：柯里化是一种将多参数函数转换为一系列使用一个参数的函数的技术。闭包可以让柯里化更加简洁和易读。

例如，使用闭包实现一个简单的柯里化函数：

function curry(fn) {return function curried(...args) {if (args.length >= fn.length) {return fn.apply(this, args);} else {return function(...args2) {return curried.apply(this, args.concat(args2));};}};
}function sum(a, b, c) {return a + b + c;
}const curriedSum = curry(sum);
const sum5 = curriedSum(5);
console.log(sum5(3)(2)); // 输出 10