你在一个函数内新建另一个函数时，就相当于创建了一个闭包。内层函数就是闭包。通常情况下，为了能够使得外部函数的内部变量可以访问，一般都会返回这个闭包。
function outerFunction () { const outer = `I see the outer variable!` function innerFunction() { console.log(outer) } return innerFunction } outerFunction()() // I see the outer variable!
因为内部函数是返回值，因此你可以简化函数声明的部分：
function outerFunction () { const outer = `I see the outer variable!` return function innerFunction() { console.log(outer) } } outerFunction()() // I see the outer variable!
因为闭包可以访问外层函数的变量，因此他们通常有两种用途：
减少副作用
创建私有变量
使用闭包控制副作用
当你在函数返回值时执行某些操作时，通常会发生一些副作用。副作用在很多情况下都会发生，比如Ajax调用，超时处理，或者哪怕是console.log的输出语句：
function (x) { console.log('A console.log is a side effect!') }
当你使用闭包来控制副作用时，你实际上是需要考虑哪些可能会混淆代码工作流程的部分，比如Ajax或者超时。
要把事情说清楚，还是看例子比较方便：
比如说你要给为你朋友庆生，做一个蛋糕。做这个蛋糕可能花1秒钟的时间，所以你写了一个函数记录在一秒钟以后，记录做完蛋糕这件事。
为了让代码简短易读，我使用了ES6的箭头函数：
function makeCake() { setTimeout(_ => console.log(`Made a cake`, 1000) ) }
如你所见，做蛋糕带来了一个副作用：一次延时。
更进一步，比如说你想让你的朋友能选择蛋糕的口味。那么你就给做蛋糕makeCake这个函数加了一个参数。
function makeCake(flavor) { setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000)) }
因此当你调用这个函数时，一秒后这个新口味的蛋糕就做好了。
makeCake('banana') // Made a banana cake!
但这里的问题是，你并不想立刻知道蛋糕的味道。你只需要知道时间到了，蛋糕做好了就行。
要解决这个问题，你可以写一个prepareCake的功能，保存蛋糕的口味。然后，在返回在内部调用prepareCake的闭包makeCake。
从这里开始，你就可以在你需要的时调用，蛋糕也会在一秒后立刻做好。
function prepareCake (flavor) { return function () { setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000)) } } const makeCakeLater = prepareCake('banana') // And later in your code... makeCakeLater() // Made a banana cake!
这就是使用闭包减少副作用：你可以创建一个任你驱使的内层闭包。
私有变量和闭包
前面已经说过，函数内的变量，在函数外部是不能访问的既然不能访问，那么它们就可以称作私有变量。
然而，有时候你确实是需要访问私有变量的。这时候就需要闭包的帮助了。
function secret (secretCode) { return { saySecretCode () { console.log(secretCode) } } } const theSecret = secret('CSS Tricks is amazing') theSecret.saySecretCode() // 'CSS Tricks is amazing'
这个例子里的saySecretCode函数，就在原函数外暴露了secretCode这一变量。因此，它也被成为特权函数。
使用DevTools调试
Chrome和Firefox的开发者工具都使我们能很方便的调试在当前作用域内可以访问的各种变量一般有两种方法。
第一种方法是在代码里使用debugger关键词。这能让浏览器里运行的JavaScript的暂停，以便调试。
下面是prepareCake的例子：
function prepareCake (flavor) { // Adding debugger debugger return function () { setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000)) } } const makeCakeLater = prepareCake('banana')
打开Chrome的开发者工具，定位到Source页下（或者是Firefox的Debugger页），你就能看到可以访问的变量了。
使用debugger调试prepareCake的作用域。
你也可以把debugger关键词放在闭包内部。注意对比变量的作用域：