<>前言

闭包可以说是最最最最最最常见的面试题之一了,很多人面试的时候都被问到过闭包的知识,闭包的概念是什么?闭包的好处和坏处是什么?闭包有哪些应用场景了?

前两天朋友面试的时候也被问到过这个问题,网上的答案也有很多:有的说能够读取其他函数内部作用域的函数就是闭包,也有的说所有的函数都是闭包,哪怕是全局作用域上的,因为它能获取到全局作用域上的变量…答案也是很不统一,这就让还是新手的我对于答案有点举棋不定了,于是重温了一下《你不知道的javascript上卷》和《javascript高级程序第四版》,看了一下这两本书对于闭包的解释,记录一下相关知识,希望能够帮助到大家。

<>初始闭包

《你不知道的javascript》 javascript中闭包无处不在,你只需要能够识别并拥抱它。
闭包就是基于词法作用域的,你在书写代码的时候产生的一种现象。
当函数能够记住并访问自己所在的词法作用域的时候就产生了闭包
function foo(){ var a = 2; function bar(){ console.log(a) //2 } } foo()

上述的这段代码中,bar可以说也是一个闭包,因为它能够访问到他所在的作用域里面的变量。但是他却是封闭在foo里面的,就相当于一个词法作用域的查找规则而已,自己的作用域没找到,去上一个作用域找。也是闭包的一部分
function foo(){ var a = 2; function bar(){ console.log(a) } return bar } var
baz= foo() baz() //2 -----------这才是闭包的效果

我们将bar函数传递出去,然后调用foo函数的时候赋值给baz,调用baz就相当于调用了内部的bar函数了,而且bar相当于在自己所在的词法作用域之外执行了。foo函数执行之后,正常的话内部的作用域会被销毁,垃圾回收机制也会释放不再使用的内存空间,但是闭包可以阻止这种事情,让foo内部的作用域依然存在着。这样以供bar函数在后面的任何地方,任何时间引用
bar函数依然持有对这个作用域的引用,这个引用就叫闭包。
无论我们以何种的方式将bar这个函数传递出去 function foo() { var a = 2; function bar() { console.log
( a ); // 2 } baz( bar); } function baz(fn) { fn(); // 作为参数传递出去 这也是闭包 } var fn;
function foo() { var a = 2; function bar() { console.log( a ); } fn = baz; //
直接赋值给全局变量fn} function bar() { fn(); // 这也是闭包 } foo(); baz(); // 2
上面这几组代码,有将函数作为参数传递出去的,也有将函数赋值给一个全局变量的,都让这个函数可以在词法作用域之外调用了,都是闭包。包括我们平时使用的一些计时器,定时器,事件监听器这些使用了回调
函数,都是闭包的应用 function getName(name){ setTimeout( function timer() { console.log(
name); }, 1000 ); } getName('小明')
//将一个内部函数timer传递给setTimeout,timer具有涵盖getName的闭包,还有这对name的引用
<>for循环与闭包
我们经常使用for循环 for (var i=1; i<=5; i++) { setTimeout( function timer() {
console.log( i ); }, i*1000 ); }
上述这段代码中,正常情况下我们想打印 1,2,3,4,5,但是事实上却以每秒一次的频率打印了五次6,6是从哪来的那?这个循环的终止条件是 i
不在<=5,所以首次成立条件的时候 i 就是6,打印的就是循环结束时候的值?这是为什么?

虽然这个timer函数在每次迭代的时候都定义一次,相当于定义了五个,但是都封闭在一个共享的全局作用域下面,就相当于只有一个i,根据js中setTimeout的运行机制来看,也是正常的。
那我们得如何处理那?我们可以在每次迭代的时候都创建一个作用域,这个样的话就不是在一个全局作用域了。 for (var i=1; i<=5; i++) { (
function() { setTimeout( function timer() { console.log( i ); }, i*1000 ); })();
}
我们先尝试使用了一下自执行函数来创建作用域。
还是不行…
我们可以在每次迭代的时候创建一个块级作用域 for (let i=1; i<=5; i++) { setTimeout( function timer() {
console.log( i ); }, i*1000 ); }
我们使用到了es6 中的let定义变量,在每次迭代的时候都创建一个块级作用域,这样是可以的

<>闭包的应用场景
闭包有什么应用场景?比如定时器,回调函数,防抖函数....很多都是用到了闭包 我们还可以封装私有变量 (function() { // 私有变量和私有函数
let privateVariable = 10; function privateFunction() { return false; } // 构造函数
MyObject= function() {}; // 公有和特权方法 MyObject.prototype.publicMethod = function()
{ privateVariable++; return privateFunction(); }; })(); var obj = new MyObject()
obj.publicMethod() //false

比如上面这种,我们使用一个自执行函数封装私有变量,创建一个构造函数表达式,我们没有用var定义,说明是一个全局的,在构造函数的原型上创建了一个publicMethod函数方法,这个函数就可以访问这个函数的词法作用域,就是一个闭包
我们也可以使用模块模式创建,返回一个单例对象 function singleton() { // 私有变量和私有函数 let privateVariable
= 10; function privateFunction() { return false; } // 特权/公有方法和属性 return {
publicProperty: true, publicMethod() { privateVariable++; return privateFunction
(); } }; } var foo = singleton(); foo.publicMethod() //false

singleton函数返回了一个对象,相当于一个模块实例,这个对象里面的publicMethod函数具有涵盖模块实例内部作用域的闭包,singleton函数也可以是自执行函数

<>小结
当函数可以记住并访问所在的词法作用域,即使函数是在当前词法作用域之外执行,这时就产生了闭包。闭包也是一个非常强大的工具,可以用多种形式来实现模块等模式。
闭包也会出现也写问题,比如将把HTML元素保存在某个闭包的作用域中,就相当于宣布该元素不能被销毁。或者是你把函数return出来后 他就给
window了所以一直存在内存中。会造成内存泄露。 function Handler() { let element =
document.getElementById('element'); let id = element.id; element.onclick = () =>
console.log(id); element = null;//
将element设置为null,解除对这个对象的引用,其引用计数也会减少,从而确保其内存可以在适当的时候被回收。}
参考资料:
《你不知道的javascript》上卷
《javascript高级程序设计第四版》

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信