闭包并不复杂。学习和理解闭包的基础知识仅仅只需要10分钟。
什么是闭包?
闭包是JavaScript的一部分,每个工程师都应该知道和理解闭包。今天的文章只是撇开闭包的表面,但是将会给你一个很好的思想,关于什么是闭包和它在JavaScript中是如何运行的。好了,接下来我们开始吧。
我们先从书本中闭包的定义开始。
定义1
闭包是一个能访问父作用域的函数,即使此作用域关闭了。
定义2
闭包是一个函数和该函数被声明的词汇环境的组合。
很好,但是这些真正的意思是什么?
首先你需要理解在JavaScript中的作用域,作用域实质上是变量在JavaScript中的生命周期。因此,当一个变量定义了一个大的作用域,这个变量会存活多久,那个方法在你的程序中会访问到它。
让我们看一个例子。
当你在JavaScript中创建一个函数,它可以访问创建在这个函数里面和外面的变量。
变量创建在一个函数中也定义了这个变量。一个局部变量只能在这个被定义的函数里面访问到。在下面这个例子中,你将会看到如果我们尝试在这个函数外面打印words
,它会输出错误信息。这是因为words
是一个内部作用域。
function speak () {
var words = 'hi';
console.log(words);
}
speak(); // hi
console.log(words); // undefined
和上一个例子不同,这次我们定义这个words 为全局作用域。
意思是说我们可以在任何函数中访问这个变量。
// 将变量放到函数的外面
// words 现在是个全局变量
var words = 'hi';
function speak(){
console.log(words);
}
speak(); // 'hi'
console.log(words); // 'hi'
嵌套函数
我们将一个函数放到另一个函数里面会发生什么?我想你跟着操作下面的例子,因为这个会很有趣!
如果你使用谷歌浏览器,打开你的开发工具调试模式:
[Windows]:Ctrl + Shift + J
[MAC]:Cmd + Opt + J
Cool,现在拷贝下面的代码然后粘贴到你的控制台中。我们现在做的是创建一个名字为speak
的函数。speak
返回一个名称为logIt
的函数。最终logIt
在控制台中打印log值为words
,在这个实例要实现在控制台中输出 ‘hi’
function speak() {
return function logIt() {
var words = 'hi';
console.log(words);
}
}
当你拷贝到这段代码到你的控制台中,我们将要创建一个变量,然后将speak函数赋值给它。
var sayHello = speak();
现在我们可以看见这个变量sayHello
调用了之后,没有执行内部函数。
sayHello;
// function logIt() {
// var words = 'hi';
// console.log(words);
// }
如上打印的结果,sayHello
打印的是我们return的内部函数,也就是说,如果我们执行sayHello()
在控制台中,它将会唤起执行logIt()
函数:
sayHello();
// 'hi'
它奏效了,但是并没有任何特别。让我们移除一行代码看看什么发生了改变。请看下面的示例。我们将清楚定义的变量words
移到speak()
函数的里面。
function speak() {
var words = 'hi';
return function logIt() {
console.log(words);
}
}
像之前的操作,让我们定义一个变量并将speak函数赋值给它:
var sayHello = speak();
现在我们看看我们的 sayHello变量会输出什么:
sayHello
// function logIt() {
// console.log(words);
// }
哦,这里没有words
变量的定义,那么发生了什么当我们执行这个函数的时候?
sayHello();
// 'hi'
它仍然起作用了!这是因为你刚刚体验了闭包的影响。
是否有点疑惑?没关系,回想下我们的闭包的定义:
闭包是一个能访问父作用域的函数,即使此作用域关闭了。
在这个例子中我们的speak()
函数作用域关闭了。这意味着 var words = 'hi'
应该消失了。然而,在JS中我们有一个名称将这种现象叫做闭包:我们的内部函数保持对其创建的范围的引用。这就允许logIt()
函数仍然可以访问words
这个变量——即使speak()
这个函数作用域关闭了。
function speak() {
var words = 'hi';
return function logIt() {
console.log(words);
}
}
重要提示,在JavaScript中每个函数都有一个闭包。你不需要你去解释闭包在函数中是怎么运行的,它仅仅只是JavaScript的一部分。
实例2
让我们查看另一个例子。这个例子有点复杂,代码如下:
function name(n) {
return function(a) {
return `${n} likes ${a}`;
};
}
我们定义了一个名字为name
的函数可以传递一个参数,返回一个匿名函数,可以传递一个不同的参数,内部函数返回一个字符串。
我们用name
函数创建两个变量。一个我们给name函数传递 John,另一个传 Cindy:
var j = name('John');
var c = name('Cindy');
让我们看看j
现在能打印什么:
j;
// function (a) {
// return `${n} likes ${a}`;
// }
所以根据之前示例我们知道这是因为闭包,这个函数应该仍然可以访问n
的变量通过父作用域。我们所能做的是把a
传递过去,在执行函数的时候。
让我们试试:
j('dogs'); // 'John likes dogs'
c('cats'); // 'Cindy likes cats'
成功了!因为闭包我们才能从之前关闭的作用域引用变量成功的执行我们的函数。
总结
希望你现在可以理解基本的闭包在JavaScript和它是如何运行的!这虽然只是冰山一角,但明白了基础知识才能学习和练习更复杂的闭包。
翻译原文链接:https://codeburst.io/understand-closures-in-javascript-d07852fa51e7
翻译中有疏漏的地方,欢迎指正。
校对:蹦蹦