120 lines
3.7 KiB
JavaScript
120 lines
3.7 KiB
JavaScript
## 闭包的引入
|
||
|
||
我们知道，变量根据作用域的不同分为两种：全局变量和局部变量。
|
||
|
||
- 函数内部可以访问全局变量和局部变量。
|
||
|
||
- 函数外部只能访问全局变量，不能访问局部变量。
|
||
|
||
- 当函数执行完毕，本作用域内的局部变量会销毁。
|
||
|
||
比如下面这样的代码：
|
||
|
||
```js
|
||
function foo() {
|
||
let a = 1;
|
||
}
|
||
|
||
foo();
|
||
console.log(a); // 打印报错：Uncaught ReferenceError: a is not defined
|
||
```
|
||
|
||
上方代码中，由于变量 `a` 是函数内的局部变量，所以外部无法访问。
|
||
|
||
但是，在有些场景下，我们就是想要在函数外部访问函数内的局部变量，那要怎么办呢？这就需要引入闭包的概念。
|
||
|
||
## 闭包的概念和代码举例
|
||
|
||
### 闭包的概念
|
||
|
||
**闭包**（closure）：指有权**访问**另一个函数作用域中**变量**的**函数**。
|
||
|
||
上面这个概念，出自《JavaScript 高级程序设计（第 3 版）》这本书。上面的概念中指出，闭包是一种函数；当然，你可以**把闭包理解成是一种现象**。具体解释如下。
|
||
|
||
简单理解就是：如果**这个作用域可以访问另外一个函数内部的局部变量**，那就产生了闭包（此时，你可以把闭包理解成是一种现象）；而另外那个作用域所在的函数称之为**闭包函数**。注意，这里强调的是访问**局部变量**哦。
|
||
|
||
### 闭包代码举例
|
||
|
||
代码举例：
|
||
|
||
```js
|
||
function fn1() {
|
||
let a = 10;
|
||
|
||
function fn2() {
|
||
console.log(a);
|
||
}
|
||
fn2();
|
||
}
|
||
|
||
fn1();
|
||
```
|
||
|
||
打印结果：
|
||
|
||
```
|
||
10
|
||
```
|
||
|
||
上方代码中，函数 fn2 的作用域 访问了 fn1 中的局部变量，那么，此时在 fn1 中就产生了闭包，fn1 称之为闭包函数。
|
||
|
||
### 在 chrome 浏览器控制台中，调试闭包
|
||
|
||
上面的代码中，要怎么验证，确实产生了闭包呢？我们可以在 chrome 浏览器的控制台中设置断点，当代码执行到 `console.log(a)`这一行的时候，如下图所示：
|
||
|
||
|
||
|
||
上图中， Local 指的是局部作用域，Global 指的是 全局作用域；而 Closure 则是**闭包**，fn1 是一个闭包函数。
|
||
|
||
## 闭包的作用：延伸变量的作用范围
|
||
|
||
我们来看看下面这段闭包的代码：
|
||
|
||
```js
|
||
function fn1() {
|
||
let a = 20;
|
||
|
||
function fn2() {
|
||
console.log(a);
|
||
}
|
||
return fn2;
|
||
}
|
||
|
||
const foo = fn1(); // 执行 fn1() 之后，会得到一个返回值。foo 代表的就是 fn2 函数
|
||
foo();
|
||
```
|
||
|
||
上方代码中，foo 代表的就是整个 fn2 函数。当执行了 `foo()` 语句之后（相当于执行了 ），fn1 函数内就产生了闭包。
|
||
|
||
一般来说，在 fn1 函数执行完毕后，它里面的变量 a 会立即销毁。但此时由于产生了闭包，所以 **fn1 函数中的变量 a 不会立即销毁，因为 fn2 函数还要继续调用变量 a**。只有等所有函数把变量 a 调用完了，变量 a 才会销毁。
|
||
|
||
而且，可以看出， 在执行 `foo()`语句之后，竟然能够打印出 `20`，这就完美通过闭包实现了：全局作用局成功访问到了局部作用域中的变量 a。
|
||
|
||
因此，我们可以看出，闭包的主要作用就是：延伸了变量的作用范围。
|
||
|
||
上面的代码也可以简写成：
|
||
|
||
```js
|
||
function fn1() {
|
||
let a = 20;
|
||
|
||
return function () {
|
||
console.log(a);
|
||
};
|
||
}
|
||
|
||
const foo = fn1(); // 执行 fn1() 之后，会得到一个返回值。这个返回值是函数
|
||
foo();
|
||
```
|
||
|
||
|
||
|
||
## 我的公众号
|
||
|
||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||
|
||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||
|
||
|
||
|