JavaScript作用域和闭包

削减副感化
创建私有变量

应用闭包控制副感化

当你在函数返回值时履行某些操作时，平日会产生一些副感化。副感化在很多情况下都邑产生，比如Ajax调用，超时处理，或者哪怕是console.log的输出语句：

function (x) {  console.log('A console.log is a side effect!')}

当你应用闭包来控制副感化时，你实际上是须要推敲哪些可能会混淆代码工作流程的部分，比如Ajax或者超时。

要把工作说清跋扈，照样看例子比较便利：

比如说你要给为你同伙庆生，做一个蛋糕。做这个蛋糕可能花1秒钟的时光，所以你写了一个函数记录在一秒钟今后，记录做垮台糕这件事。

为了让代码简短易读，我应用了ES6的箭头函数：

如你所见，做蛋糕带来了一个副感化：一次延时。

更进一步，比如说你想让你的同伙能选择蛋糕的口味。那么你就给做蛋糕makeCake这个函数加了一个参数。

function makeCake(flavor) {  setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000))}

你也可以把debugger关键词放在闭包内部。留意比较变量的感化域：

makeCake('banana')// Made a banana cake!

但这狼９依υ?题是，你并不想急速知道蛋糕的味道。你只须要知道时光到了，蛋糕做好了久煨。

要解决这个问题，你可以写一个prepareCake的功能，保存蛋糕的口味。然后，在返回在内部调用prepareCake的闭包makeCake。

function outerFunction () {  const outer = `I see the outer variable!`  function innerFunction() {    console.log(outer)  }  return innerFunction}outerFunction()() // I see the outer variable!

大年夜这里开端，你就可以在你须要的时调用，蛋糕也会在一秒后急速做好。

这就是应用闭包削减副感化：你可以创建一个任你使令的内层闭包。

私有变量和闭包

前面已经说过，函数内的变量，在函数外部是不克不及拜访的既然不克不及拜访，那么它们就可以称作私有变量。

然而，有时刻你确切是须要拜访私有变量的。这时刻就须要闭包的赞助了。

const hello = 'Hello CSS-Tricks Reader!'function sayHello () {  console.log(hello)}console.log(hello) // 'Hello CSS-Tricks Reader!'sayHello() // 'Hello CSS-Tricks Reader!'

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')

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 makeCake() {  setTimeout(_ => console.log(`Made a cake`, 1000)  )}

打开Chrome的开辟者对象，定位到Source页下（或者是Firefox的Debugger页），你就能看到可以拜访的变岑岭。

function prepareCake (flavor) {  return function () {    // Adding debugger    debugger    setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000))  }}const makeCakeLater = prepareCake('banana')