当前位置：首页 > news >正文

Typescript中闭包的原理 - 教程

news 2026/6/13 10:27:14

Typescript中闭包的原理 - 教程

在 TypeScript（以及 JavaScript）中，闭包描述了函数能够访问其声明时所在作用域的变量，即使该函数在其声明的作用域之外被调用的现象。

定义:闭包是指一个函数能够记住并访问其词法作用域（lexical scope）中的变量，即使这个函数是在其词法作用域之外执行。

闭包的核心原理

作用域链机制：
- 每个函数在创建时都会形成一个作用域
- 当函数内部访问变量时，会先在自身作用域查找，如果找不到则向上级作用域查找，直到全局作用域
- 这种层级关系形成了作用域链
函数与作用域的绑定：
- 闭包的本质是函数与其声明时所处的词法环境（lexical environment）的组合
- 当函数被创建时，会捕获（close over）其周围的变量和函数，形成一个封闭的环境
延长变量生命周期：
- 正常情况下，函数执行完毕后，其内部变量会被垃圾回收
- 但如果存在闭包引用了这些变量，它们会被保留下来，直到闭包不再被引用

TypeScript 中的闭包示例

function outerFunction(message: string) {
// 这个变量会被内部函数捕获
const count = 0;
// 内部函数形成闭包
function innerFunction() {
// 可以访问outerFunction的变量
console.log(message);
console.log(count);
}
// 返回闭包
return innerFunction;
}
// 接收闭包
const closure = outerFunction("Hello, Closure!");
// 即使outerFunction已执行完毕，仍能访问其内部变量
closure(); // 输出: "Hello, Closure!" 和 0

闭包的用途

数据私有化：创建私有变量和方法
函数工厂：根据参数生成不同功能的函数
回调函数：在异步操作中保持状态
模块模式：实现模块化代码

TypeScript 对闭包的增强

TypeScript 作为 JavaScript 的超集，完全支持闭包特性，并且通过类型系统增强了闭包的使用：

function createCounter(initial: number): () => number {
let count = initial;
return function(): number {
return count++;
};
}
// 类型推断会正确识别返回的函数类型
const counter = createCounter(10);
console.log(counter()); // 10
console.log(counter()); // 11

实例

让我们看一个用 TypeScript 编写的经典例子：

function outerFunction(outerValue: number) {
// 外部函数的变量
const outerString: string = "Hello";
// 内部函数 -> 闭包开始形成
function innerFunction(innerValue: number): void {
console.log(`Outer value: ${outerValue}`);
console.log(`Outer string: ${outerString}`);
console.log(`Inner value: ${innerValue}`);
console.log(`Total: ${outerValue + innerValue}`);
}
// 返回内部函数，使其能够在 outerFunction 的作用域外被执行
return innerFunction;
}
// 调用 outerFunction，它返回 innerFunction
// 此时，closure 就是一个闭包实例，它“关闭”了 outerFunction 的作用域
const closure = outerFunction(10);
// 在 outerFunction 的执行上下文已经销毁后，调用 closure
// 但是 closure 仍然能访问到 outerValue 和 outerString
closure(5); // 输出：
// Outer value: 10
// Outer string: Hello
// Inner value: 5
// Total: 15

原理深入剖析：执行上下文与词法环境

在底层，JavaScript 引擎通过执行上下文和词法环境来实现闭包。

调用 outerFunction(10):
- 创建一个新的执行上下文，并将其推入调用栈。
- 创建对应的词法环境，其中包含了参数 outerValue 和局部变量 outerString。
- 定义 innerFunction。此时，innerFunction 的内部属性 [[Environment]] 会被设置为当前（即 outerFunction 的）词法环境的引用。这一步至关重要，它建立了作用域链的连接。
outerFunction 执行完毕:
- 其执行上下文从调用栈中弹出。
- 但是，因为返回的 innerFunction 的 [[Environment]] 仍然引用着 outerFunction 的词法环境，所以这个词法环境不会被垃圾回收机制销毁。它被保留在内存中，以便 innerFunction 将来使用。
调用 closure(5) (也就是 innerFunction(5)):
- 为 innerFunction 创建一个新的执行上下文和词法环境。
- 这个新词法环境的外部环境引用指向的就是之前在 [[Environment]] 中保存的那个 outerFunction 的词法环境。
- 当 innerFunction 尝试访问 outerValue 或 outerString 时，引擎会沿着这条作用域链查找，成功在 outerFunction 的词法环境中找到它们。