注:本文为 《 JavaScript 完全手册(2018版) 》第19节,你可以查看该手册的完整目录。
这是对闭包主题的一个简单介绍,闭包是理解 JavaScript 函数如何工作的关键。
如果你曾经用 JavaScript 编写过函数,那么你已经使用了闭包。
这是一个需要理解的关键主题,它会影响你所做的事情。
当一个函数运行时,它执行在定义它时的作用域中,而不是在执行它时所处的状态。
作用域基本上可以理解为可见的变量集合。
函数会记住其词法作用域,并且能够访问在父作用域中定义的变量。
简而言之,函数有一整套可以访问的变量。
让我立即举一个例子来验证这一点。
const bark = dog => { const say = `${dog} barked!` ;(() => console.log(say))() } bark(`Roger`)
按照预期在控制台中打印 Roger barked!
如果您想要返回操作,该怎么办呢:
const prepareBark = dog => { const say = `${dog} barked!` return () => console.log(say) } const bark = prepareBark(`Roger`) bark()
这段代码还是在控制台中打印 Roger barked!
让我们做最后一个例子,它将 prepareBark
重用于两只不同的 dog:
const prepareBark = dog => { const say = `${dog} barked!` return () => { console.log(say) } } const rogerBark = prepareBark(`Roger`) const sydBark = prepareBark(`Syd`) rogerBark() sydBark()
打印结果:
Roger barked! Syd barked!
如您所见,变量 say
的状态与从 prepareBark()
返回的函数相关联。
还要注意我们第二次调用 prepareBark()
时重新定义一个新的 say 变量,但这不会影响第一个 prepareBark()
作用域的状态。
这就是闭包的工作原理:返回的函数将保持作用域里的初始状态。
了解闭包更多知识请阅读:JavaScript 核心概念之作用域和闭包
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂