JavaScript 解密 —— 函数进阶（闭包与生成器）

一、闭包

简单来说，闭包（closure）允许函数访问和操作位于自身外部的变量。
借助闭包的特性，函数可以访问任何变量及其他函数，只要这些数据在该函数定义时位于其作用域内部。

var outerValue = "samurai"
var later

function outerFunction() {
  var innerValue = "ninja"

  function innerFunction() {
    console.log(outerValue)
    console.log(innerValue)
  }
  later = innerFunction
}

outerFunction()
later()
// samurai
// ninja

参考上面的代码，按照通常的理解：

• 变量 outerValue 定义在全局作用域中，因此其可以从程序的任意位置访问
• outerFunction 执行，将 innerFunction 关联给全局变量 later
• 当 later（innerFunction）执行时，outerFunction 已经执行完毕，其内部的作用域理应失效，无法被 later 访问
• innerValue 由于在 outerFunction 内部定义，则 later 访问 innerValue 时其值应该为 undefined

实际上程序输出的 innerValue 的值为 ninja，即 outerFunction 内部定义的 innerValue 可以被 later 访问。这就是闭包所产生的效果。

当我们在 outerFunction 内部声明 innerFunction 时，一个包含当前作用域（“当前”指的是内部函数定义的时刻）中所有变量的闭包同时被创建。最终 innerFunction 执行时，即便其声明时的原始作用域已经消失，innerFunction 还是可以通过闭包访问其原始作用域。
闭包像是使用了一个“保护层”将函数定义时的作用域封闭起来，只要该函数的生命周期未结束，“保护层”内的作用域就一直可以被访问。

二、闭包的现实应用

模拟私有变量

私有变量即从对象外部不可见的变量，可以向用户隐藏对象内部不必要的实现细节。
JavaScript 没有对私有变量的原生支持，但是通过闭包可以实现类似的功能。

function Ninja() {
  var feints = 0
  this.getFeints = function() {
    return feints
  }
  this.feint = function() {
    feints++
  }
}

var ninja1 = new Ninja()
ninja1.feint()

console.log(ninja1.feints)  // undefined
console.log(ninja1.getFeints())  // 1

var ninja2 = new Ninja()
console.log(ninja2.getFeints())  // 0

在回调函数中使用闭包

<button id="box1">First Button</button>
 <script>
   function animateIt(elementId) {
     var elem = document.getElementById(elementId)
     var tick = 100
     var timer = setInterval(function() {
       if (tick < 1000) {
        elem.style.width = tick + "px"
        tick += 10
       } else {
         clearInterval(timer)
       }
     }, 100)
   }
   animateIt("box1")
   </script>

在上面的代码中，一个匿名函数作为参数（回调函数）传递给 setInterval，令指定元素的宽度能够随时间增长以形成动画效果。该匿名函数借助闭包能够访问外部定义的 elem、tick、timer 三个参数，控制动画的进度。
这三个参数定义在 animateIt 内部通过闭包被回调函数访问，而不是直接在全局作用域中定义。这样可以避免多个 animateIt 函数依次运行时引起冲突。

三、生成器

生成器是一种可以生成一系列值的特殊函数，只不过这些值不是同时产生的，需要用户显式地去请求新值（通过 for、next 等）。

function* WeaponGenerator() {
  yield "Katana"
  yield "Wakizashi"
  yield "Kusarigama"
}

for(let weapon of WeaponGenerator()) {
  console.log(weapon)
}

// Katana
// Wakizashi
// Kusarigama

调用生成器并不意味着会逐步执行生成器函数的定义代码，而是会创建一个迭代器（iterator）对象，通过这个迭代器对象与生成器进行交互（如请求新的值）。

function* WeaponGenerator() {
  yield "Katana"
  yield "Wakizashi"
}

const weaponsIterator = WeaponGenerator()

const result1 = weaponsIterator.next()
console.log(typeof result1, result1.value, result1.done)
// object Katana false

const result2 = weaponsIterator.next()
console.log(typeof result2, result2.value, result2.done)
// object Wakizashi false

const result3 = weaponsIterator.next()
console.log(typeof result3, result3.value, result3.done)
// object undefined true

使用 while 遍历生成器：

function* WeaponGenerator() {
  yield "Katana"
  yield "Wakizashi"
}

const weaponsIterator = WeaponGenerator()
let item
while(!(item = weaponsIterator.next()).done) {
  console.log(item.value)
}

// Katana
// Wakizashi

生成器嵌套：

function* WarriorGenerator() {
  yield "Sun Tzu"
  yield* NinjaGenerator()
  yield "Genghis Khan"
}

function* NinjaGenerator() {
  yield "Hattori"
  yield "Yoshi"
}

for(let warrior of WarriorGenerator()) {
  console.log(warrior)
}

// Sun Tzu
// Hattori
// Yoshi
// Genghis Khan

生成器的应用

生成 ID

function* IdGenerator() {
  let id = 0
  while (true) {
    yield ++id
  }
}

const idIterator = IdGenerator()
const ninja1 = { id: idIterator.next().value }
const ninja2 = { id: idIterator.next().value }
const ninja3 = { id: idIterator.next().value }

console.log(ninja1.id)  // 1
console.log(ninja2.id)  // 2
console.log(ninja3.id)  // 3

遍历DOM

使用递归函数：

<div id="subTree">
  <form>
    <input type="text" />
  </form>
  <p>Paragraph</p>
  <span>Span</span>
</div>
 <script>
   function traverseDOM(element, callback) {
     callback(element)
     element = element.firstElementChild
     while (element) {
       traverseDOM(element, callback)
       element = element.nextElementSibling
     }
   }
   const subTree = document.getElementById("subTree")
   traverseDOM(subTree, function(element) {
     console.log(element.nodeName)
   })
 </script>

使用生成器（无需借助 callback）：

<div id="subTree">
  <form>
    <input type="text" />
  </form>
  <p>Paragraph</p>
  <span>Span</span>
</div>
 <script>
   function* DomTraversal(element) {
     yield element
     element = element.firstElementChild
     while (element) {
       yield* DomTraversal(element)
       element = element.nextElementSibling
     }
   }

   const subTree = document.getElementById("subTree")
   for(let element of DomTraversal(subTree)) {
     console.log(element.nodeName)
   }
 </script>

通过 next 方法向生成器发送值

生成器不仅可以通过 yield 表达式生成一系列值，还可以接受用户传入数据，形成一种双向的通信。

function* NinjaGenerator(action) {
  const imposter = yield ("Hattori " + action)
  yield ("Yoshi (" + imposter + ") " + action)
}

const ninjaIterator = NinjaGenerator("skulk")
const result1 = ninjaIterator.next()
console.log(result1.value)  // Hattori skulk

const result2 = ninjaIterator.next("Hanzo")
console.log(result2.value)  // Yoshi (Hanzo) skulk

yield

具体的执行流程为：

• 第一个 ninjaIterator.next() 向生成器请求新值，获取到第一个 yield 右侧的值 "Hattori " + action，同时在 yield ("Hattori " + action) 表达式处挂起执行流程
• 第二个 ninjaIterator.next("Hanzo") 继续向生成器请求新值，同时还发送了参数 Hanzo 给生成器，该参数刚好用作前面挂起的 yield ("Hattori " + action) 表达式的结果，使得 imposter 的值成为 Hanzo
• 最终 ninjaIterator.next("Hanzo") 请求获得第二个 yield 右侧 "Yoshi (" + imposter + ") " + action 的值，即 Yoshi (Hanzo) skulk

参考资料

Secrets of the JavaScript Ninja, Second Edition