JavaScript必知33个概念系列：闭包

发表于 更新于 分类于 ，

闭包是函数及其创建时保存的状态环境。

前言

JavaScript中的闭包是区别于离散数学中的闭包。让我们仔细探讨一下JavaScript中的闭包吧。

闭包

什么是闭包

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.(MDN)

也就是说，闭包是函数及其创建时保存的引用状态环境。

用闭包模拟私有方法

例如Java允许定义私有方法，这样只允许类内的其他方法使用，无法通过类的实例访问。
有如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Counter{
    private int privateCounter=0;
    private void changeBy(int val){
        this.privateCounter+=val;
    }
    public void increment(){
        changeBy(1);
    }
    public void decrement(){
        changeBy(-1);
    }
    public int value(){
        return privateCounter;
    }
}

我们可以使用JavaScript来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };
};
var counter = makeCounter();
console.log(counter.value()); // logs 0
counter.increment();
counter.increment();
console.log(counter.value()); // logs 2
counter.decrement();
console.log(counter.value()); // logs 1

闭包作用域链

关于作用域链可以查看以前的文章：JavaScript必知33个概念系列：作用域

每个闭包的作用域分为三个：

  • 闭包自己的作用域
  • 外部函数作用域
  • 全局作用域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// global scope
var e = 10;
function sum(a){
  return function(b){
    return function(c){
      // outer functions scope
      return function(d){
        // local scope
        return a + b + c + d + e;
      }
    }
  }
}

console.log(sum(1)(2)(3)(4)); // log 20

每个函数都能访问外部函数作用域和全局作用域，即每个函数都能够访问作用域链上游作用域的全部变量。

闭包的典型错误问题：循环创建闭包

如下代码：

1
2
3
4
<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

setupHelp();

以上执行结果就是总是弹出最后一项内容提示，因为var是函数作用域的，所有创建的闭包都是引用的同一个对象item。

解决办法就是使用let或者是立即执行函数，foreach迭代也可以

闭包性能问题

  • 不必要的闭包会影响脚本效率，包括处理速度和内存消耗。

比较下面两组代码：

text1
1
2
3
4
5
6
7
8
9
10
11
function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
  this.getName = function() {
    return this.name;
  };

  this.getMessage = function() {
    return this.message;
  };
}
text2
1
2
3
4
5
6
7
8
9
10
function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};

text1在构造函数内部创建了闭包，而且每次创建一个对象都会创建一个函数对象 。
text2使用原型定义函数，不同的对象只有一个函数对象副本。

总结

还有一些深入话题没有总结，目前水平还不够，to be continued。

Reference