Closure

[phymo]

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.

This lexical environment consists of any local variables that were in-scope at the time the closure was created.

[phymo]

两个代码的对比

https://jsfiddle.net/vnkuZ/7726/

1. 不使用闭包，size12/size14/size16 是函数执行的结果 void，所以代码不起作用。。

   
   function makeSizer(size) {
   document.body.style.fontSize = size + 'px';
   }

var size12 = makeSizer(12); var size14 = makeSizer(14); var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12; document.getElementById('size-14').onclick = size14; document.getElementById('size-16').onclick = size16;

2. 使用闭包后，size12/size14/size16 是返回的函数，代码可以正确运行。
``` js
function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

[phymo]

Whenever you declare a new function and assign it to a variable, you store the function definition, as well as a closure. The closure contains all the variables that are in scope at the time of creation of the function. It is analogous to a backpack. A function definition comes with a little backpack. And in its pack it stores all the variables that were in scope at the time that the function definition was created.

The key to remember is that when a function gets declared, it contains a function definition and a closure. The closure is a collection of all the variables in scope at the time of creation of the function.

ref: https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8