我从来不理解JavaScript闭包,直到有人这样向我解释它( 四 )


不知怎么滴,increment函数记住了那个cunter的值 。这是怎么回事?
counter是全局执行上下文的一部分吗?尝试 console.log(counter),得到undefined的结果,显然不是这样的 。
也许,当你调用increment时,它会以某种方式返回它创建的函数(createCounter)?这怎么可能呢?变量increment包含函数定义,而不是函数的来源,显然也不是这样的 。
所以一定有另一种机制 。闭包,我们终于找到了,丢失的那块 。
它是这样工作的,无论何时声明新函数并将其赋值给变量,都要存储函数定义和闭包 。闭包包含在函数创建时作用域中的所有变量,它类似于背包 。函数定义附带一个小背包,它的包中存储了函数定义创建时作用域中的所有变量 。
所以我们上面的解释都是错的,让我们再试一次,但是这次是正确的 。
 

我从来不理解JavaScript闭包,直到有人这样向我解释它

文章插图
 
 
  1. 同上,第1-8行 。我们在全局执行上下文中创建了一个新的变量createCounter,它得到了指定的函数定义 。
  2. 同上,第9行 。我们在全局执行上下文中声明了一个名为increment的新变量 。
  3. 同上,第9行 。我们需要调用createCounter函数并将其返回值赋给increment变量 。
  4. 同上,第1-8行 。调用函数,创建新的本地执行上下文 。
  5. 同上,第2行 。在本地执行上下文中,声明一个名为counter的新变量并赋值为 0。
  6. 第3-6行 。声明一个名为myFunction的新变量,变量在本地执行上下文中声明,变量的内容是另一个函数定义 。如第4行和第5行所定义,现在我们还创建了一个闭包,并将其作为函数定义的一部分 。闭包包含作用域中的变量,在本例中是变量counter(值为0) 。
  7. 第7行 。返回myFunction变量的内容,删除本地执行上下文 。myFunction和counter不再存在 。控制权交给了调用上下文,我们返回函数定义和它的闭包,闭包中包含了创建它时在作用域内的变量 。
  8. 第9行 。在调用上下文(全局执行上下文)中,createCounter返回的值被指定为increment,变量increment现在包含一个函数定义(和闭包),由createCounter返回的函数定义,它不再标记为myFunction,但它的定义是相同的,在全局上下文中,称为increment 。
  9. 第10行 。声明一个新变量c1 。
  10. 继续第10行 。查找变量increment,它是一个函数,调用它 。它包含前面返回的函数定义,如第4-5行所定义的 。(它还有一个带有变量的闭包) 。
  11. 创建一个新的执行上下文,没有参数,开始执行函数 。
  12. 第4行 。counter = counter + 1,寻找变量 counter,在查找本地或全局执行上下文之前,让我们检查一下闭包,瞧,闭包包含一个名为counter的变量,其值为0 。在第4行表达式之后,它的值被设置为1 。它再次被储存在闭包里,闭包现在包含值为1的变量 counter 。
  13. 第5行 。我们返回counter的值,销毁本地执行上下文 。
  14. 回到第10行 。返回值1被赋给变量c1 。
  15. 第11行 。我们重复步骤10-14 。这一次,在闭包中此时变量counter的值是1 。它在第12行设置的,它的值被递增并以2的形式存储在递增函数的闭包中,c2被赋值为2 。
  16. 第12行 。重复步骤10-14行,c3被赋值为3 。
  17. 第13行 。我们打印变量c1 c2和c3的值 。
你可能会问,是否有任何函数具有闭包,甚至是在全局范围内创建的函数?答案是肯定的 。在全局作用域中创建的函数创建闭包,但是由于这些函数是在全局作用域中创建的,所以它们可以访问全局作用域中的所有变量,闭包的概念并不重要 。
当函数返回函数时,闭包的概念就变得更加重要了 。返回的函数可以访问不属于全局作用域的变量,但它们仅存在于其闭包中 。
闭包不是那么简单有时候闭包在你甚至没有注意到它的时候就会出现,你可能已经看到了我们称为部分应用程序的示例,如下面的代码所示:
我从来不理解JavaScript闭包,直到有人这样向我解释它

文章插图
 
如果箭头函数让你感到困惑,下面是同样效果:
我从来不理解JavaScript闭包,直到有人这样向我解释它

文章插图
 
我们声明一个能用加法函数addX,它接受一个参数x并返回另一个函数 。返回的函数还接受一个参数并将其添加到变量x中 。
变量x是闭包的一部分,当变量addThree在本地上下文中声明时,它被分配一个函数定义和一个闭包,闭包包含变量x 。
所以当addThree被调用并执行时,它可以从闭包中访问变量x以及为参数传递变量n并返回两者的和 7 。


推荐阅读