Attraction11

Appearance

Return to top
On this page

JavaScript 中的闭包

在课程开始前请你先思考几个问题。

  • JavaScript 中的作用域是什么意思?
  • 闭包会在哪些场景中使用？
  • 通过定时器循环输出自增的数字通过 JS 的代码如何实现？

在讲闭包之前，我要带你看一下作用域相关的知识点，以便你更好地理解本讲内容。

作用域基本介绍

JavaScript 的作用域通俗来讲，就是指变量能够被访问到的范围，在 JavaScript 中作用域也分为好几种，ES5 之前只有全局作用域和函数作用域两种。ES6 出现之后，又新增了块级作用域，下面我们就来看下这三种作用域的概念，为闭包的学习打好基础。

  1. 全局作用域

  2. 函数作用域

    在 JavaScript 中，函数中定义的变量叫作函数变量，这个时候只能在函数内部才能访问到它，所以它的作用域也就是函数的内部，称为函数作用域，下面我们来看一段代码。

js
function getName() {
    var name = 'inner';
    console.log(name); //inner
}

getName();
console.log(name);

function getName() {
    var name = 'inner';
    console.log(name); //inner
}

getName();
console.log(name);

  1. 块级作用域

    ES6 中新增了块级作用域，最直接的表现就是新增的 let 关键词，使用 let 关键词定义的变量只能在块级作用域中被访问，有“暂时性死区”的特点，也就是说这个变量在定义之前是不能被使用的。

其实就是在 JS 编码过程中 if 语句及 for 语句后面 {...} 这里面所包括的，就是块级作用域。

下面结合一段代码来说明。

js
console.log(a) //a is not defined

if(true){
  let a = '123'；
  console.log(a)； // 123
}

console.log(a) //a is not defined

console.log(a) //a is not defined

if(true){
  let a = '123'；
  console.log(a)； // 123
}

console.log(a) //a is not defined

什么是闭包？

先来看下红宝书上和 MDN 上给出的闭包的概念。

红宝书闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数。 MDN：一个函数和对其周围状态的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。

闭包的基本概念

通俗地讲解一下：闭包其实就是一个可以访问其他函数内部变量的函数。即一个定义在函数内部的函数，或者直接说闭包是个内嵌函数也可以。

因为通常情况下，函数内部变量是无法在外部访问的（即全局变量和局部变量的区别），因此使用闭包的作用，就具备实现了能在外部访问某个函数内部变量的功能，让这些内部变量的值始终可以保存在内存中。下面我们通过代码先来看一个简单的例子。

js
function fun1() {
    var a = 1;
    return function () {
        console.log(a);
    };
}

fun1();

var result = fun1();
result(); // 1

function fun1() {
    var a = 1;
    return function () {
        console.log(a);
    };
}

fun1();

var result = fun1();
result(); // 1

闭包产生的原因

我们在前面介绍了作用域的概念，那么你还需要明白作用域链的基本概念。其实很简单，当访问一个变量时，代码解释器会首先在当前的作用域查找，如果没找到，就去父级作用域去查找，直到找到该变量或者不存在父级作用域中，这样的链路就是作用域链。

需要注意的是，每一个子函数都会拷贝上级的作用域，形成一个作用域的链条。那么我们还是通过下面的代码来详细说明一下作用域链。

js
var a = 1;

function fun1() {
    var a = 2;
    function fun2() {
        var a = 3;
        console.log(a); //3
    }
}

var a = 1;

function fun1() {
    var a = 2;
    function fun2() {
        var a = 3;
        console.log(a); //3
    }
}

从中可以看出，fun1 函数的作用域指向全局作用域（window）和它自己本身；fun2 函数的作用域指向全局作用域 （window）、fun1 和它本身；而作用域是从最底层向上找，直到找到全局作用域 window 为止，如果全局还没有的话就会报错。

那么这就很形象地说明了什么是作用域链，即当前函数一般都会存在上层函数的作用域的引用，那么他们就形成了一条作用域链。

由此可见，闭包产生的本质就是：当前环境中存在指向父级作用域的引用。那么还是拿上的代码举例。

js
function fun1() {
    var a = 2;
    function fun2() {
        console.log(a); //2
    }
    return fun2;
}

var result = fun1();
result();

function fun1() {
    var a = 2;
    function fun2() {
        console.log(a); //2
    }
    return fun2;
}

var result = fun1();
result();

从上面这段代码可以看出，这里 result 会拿到父级作用域中的变量，输出 2。因为在当前环境中，含有对 fun2 函数的引用，fun2 函数恰恰引用了 window、fun1 和 fun2 的作用域。因此 fun2 函数是可以访问到 fun1 函数的作用域的变量。

那是不是只有返回函数才算是产生了闭包呢？其实也不是，回到闭包的本质，我们只需要让父级作用域的引用存在即可，因此还可以这么改代码，如下所示。

js
var fun3;

function fun1() {
    var a = 2;
    fun3 = function () {
        console.log(a);
    };
}

fun1();
fun3();

var fun3;

function fun1() {
    var a = 2;
    fun3 = function () {
        console.log(a);
    };
}

fun1();
fun3();

可以看出，其中实现的结果和前一段代码的效果其实是一样的，就是在给 fun3 函数赋值后，fun3 函数就拥有了 window、fun1 和 fun3 本身这几个作用域的访问权限；然后还是从下往上查找，直到找到 fun1 的作用域中存在 a 这个变量；因此输出的结果还是 2，最后产生了闭包，形式变了，本质没有改变。

因此最后返回的不管是不是函数，也都不能说明没有产生闭包。讲到这里你这里可以再深入体会一下闭包的内涵。

闭包的表现形式

那么明白了闭包的本质之后，我们来看看闭包的表现形式及应用场景到底有哪些呢？我总结了大概有四种场景。

  1. 返回一个函数，上面讲原因的时候已经说过，这里就不赘述了。

  2. 在定时器、事件监听、Ajax 请求、Web Workers 或者任何异步中，只要使用了回调函数，实际上就是在使用闭包。

请看下面这段代码，这些都是平常开发中用到的形式。

js
// 定时器
setTimeout(function handler(){
  console.log('1');
}，1000);

// 事件监听
$('#app').click(function(){
  console.log('Event Listener');
});

// 定时器
setTimeout(function handler(){
  console.log('1');
}，1000);

// 事件监听
$('#app').click(function(){
  console.log('Event Listener');
});
  1. 作为函数参数传递的形式，比如下面的例子。
js
var a = 1;
function foo() {
    var a = 2;
    function baz() {
        console.log(a);
    }
    bar(baz);
}

function bar(fn) {
    // 这就是闭包
    fn();
}

foo(); // 输出2，而不是1

var a = 1;
function foo() {
    var a = 2;
    function baz() {
        console.log(a);
    }
    bar(baz);
}

function bar(fn) {
    // 这就是闭包
    fn();
}

foo(); // 输出2，而不是1
  1. IIFE（立即执行函数）

创建了闭包，保存了全局作用域（window）和当前函数的作用域，因此可以输出全局的变量，如下所示：

js
var a = 2;

(function IIFE() {
    console.log(a); // 输出2
})();

var a = 2;

(function IIFE() {
    console.log(a); // 输出2
})();

IIFE 这个函数会稍微有些特殊，算是一种自执行匿名函数，这个匿名函数拥有独立的作用域。这不仅可以避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域，我们经常能在高级的 JavaScript 编程中看见此类函数。

以上关于闭包的基本概念、产生的原因及表现形式这三个方面，你已经有了一定的了解。那么最后一部分我们来看一个比较常见的开发应用场景。

如何解决循环输出问题？

在互联网大厂的面试中，解决循环输出问题是比较高频的面试题，一般都会给一段这样的代码让你来解释，那么结合本课时所讲的内容，我们在这里一起看看这个题目，代码如下。

js
for (var i = 1; i <= 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 0);
}

for (var i = 1; i <= 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 0);
}

上面这段代码执行之后，从控制台执行的结果可以看出来，结果输出的是 5 个 6，那么一般面试官都会先问为什么都是 6？我想让你实现输出 1、2、3、4、5 的话怎么办呢？

因此结合本讲所学的知识我们来思考一下，应该怎么给面试官一个满意的解释。你可以围绕这两点来回答。

  • setTimeout 为宏任务，由于 JS 中单线程 eventLoop 机制，在主线程同步任务执行完后才去执行宏任务，因此循环结束后 setTimeout 中的回调才依次执行。

  • 因为 setTimeout 函数也是一种闭包，往上找它的父级作用域链就是 window，变量 i 为 window 上的全局变量，开始执行 setTimeout 之前变量 i 已经就是 6 了，因此最后输出的连续就都是 6。

那么我们再来看看如何按顺序依次输出 1、2、3、4、5 呢？

利用 IIFE

可以利用 IIFE（立即执行函数），当每次 for 循环时，把此时的变量 i 传递到定时器中，然后执行，改造之后的代码如下。

js
for(var i = 1;i <= 5;i++){
  (function(j){
    setTimeout(function timer(){
      console.log(j)
    }, 0)
  })(i)
}

for(var i = 1;i <= 5;i++){
  (function(j){
    setTimeout(function timer(){
      console.log(j)
    }, 0)
  })(i)
}

可以看到，通过这样改造使用 IIFE（立即执行函数），可以实现序号的依次输出。

使用 ES6 中的 let

ES6 中新增的 let 定义变量的方式，使得 ES6 之后 JS 发生革命性的变化，让 JS 有了块级作用域，代码的作用域以块级为单位进行执行。通过改造后的代码，可以实现上面想要的结果。

js
for(let i = 1; i <= 5; i++){
  setTimeout(function() {
    console.log(i);
  },0)
}

for(let i = 1; i <= 5; i++){
  setTimeout(function() {
    console.log(i);
  },0)
}

从上面的代码可以看出，通过 let 定义变量的方式，重新定义 i 变量，则可以用最少的改动成本，解决该问题。

定时器传入第三个参数

setTimeout 作为经常使用的定时器，它是存在第三个参数的，日常工作中我们经常使用的一般是前两个，一个是回调函数，另外一个是时间，而第三个参数用得比较少。那么结合第三个参数，调整完之后的代码如下。

js
for(var i=1;i<=5;i++){
  setTimeout(function(j) {
    console.log(j)
  }, 0, i)
}

for(var i=1;i<=5;i++){
  setTimeout(function(j) {
    console.log(j)
  }, 0, i)
}

从中可以看到，第三个参数的传递，可以改变 setTimeout 的执行逻辑，从而实现我们想要的结果，这也是一种解决循环输出问题的途径。

总结

闭包的使用在日常的 JavaScript 编程中经常出现，使用的场景特别多而且复杂。由于闭包会使一些变量一直保存在内存中不会自动释放，所以如果大量使用的话就会消耗大量内存，从而影响网页性能。因此，你更应该深入理解闭包的原理，从而保证交付的代码性能更好。

Released under the MIT License.

Copyright © 2022-present Attraction11