Web前端开发技术

Appearance

闭包 ​

元信息 ​

  • 目标：理解 IIFE 能"私有"的机制原理——函数记住其定义处的外部变量；能在事件处理与模块模式中判断哪些变量可用（实参、this、外部变量）
  • 关键概念：闭包、this、外部变量、函数作用域、模块模式
  • 关联阶段：cp3
  • 常见误区：以为闭包是特殊语法（它是函数值与其定义环境的自然结合）；以为函数返回后局部变量即销毁（被闭包引用则存活）；以为 this 指函数定义处的对象（由调用方式决定）

问题的提出 ​

作用域与IIFE 中，IIFE 能把 counter 藏进函数内部、且在函数返回后依然记得它——支撑这一点的机制就是闭包。更一般地问：事件处理函数中，有哪些变量可用？

  • 函数的实参
  • this 对象
  • 外部变量

前两者随每次调用而来，而"外部变量"能一直可用，正是闭包在起作用：

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;
Open on CodeSandboxOpen Sandbox

this 对象 ​

由调用方式决定。作为 DOM 事件处理函数被调用时，this 默认绑定到挂载该事件的元素（相当于 event.currentTarget）。

外部变量 ​

函数定义处所在作用域链上的变量（也称词法环境）。无论函数之后在哪里被调用，它引用的始终是定义处的那个环境——这就是"函数值 + 定义环境"的闭包本质。

教程 ​