JavaScript 学习笔记之闭包
这篇文章是我学习闭包的笔记与总结,后面会有一些例子,结合画图的形式来理解,什么是闭包…..如有错误,还望指正,大神勿喷……
从以下几个方面去说闭包
1. 什么是闭包
2. 为什么使用闭包
3. 何时使用闭包
4. 如何使用闭包
5. 闭包是如何形成的
6. 闭包的缺点
什么是闭包
其实闭包它并不是一种(类似于对象)看得见摸得着的东西,它是一种机制;
是一种:能够让你重复使用变量,而又不会造成变量污染
的机制
为什么要使用闭包
-
为什么使用闭包要从
全局变量和局部变量的优缺点
说起- 全局作用域:保存全局变量,可以反复使用,而且随处可用,但是会造成全局污染
- 局部作用域:保存局部变量,仅函数内可用,而且不可反复使用
何时使用闭包
既要重用变量,又保护变量不被污染
如何使用闭包
外层函数 包裹受保护的变量和操作变量的内层函数
-
外层函数要返回内层函数,有 3 种返回方式:
- return function
- 直接给全局变量赋值一个内部function
- 将内部函数保存在一个对象的属性或数组元素中
调用外层函数,用全局变量接住返回的内层函数的变量
(这一步形成闭包)
闭包如何形成
外层函数被调用后,外层函数的作用域对象(Active Object),无法释放,被内层函数(scope)引用着。
闭包的缺点
- 闭包比普通函数更占内存,外层函数的作用域对象(AO)始终存在
- 造成内存泄漏,解决的办法(释放闭包):将引用内层函数对象的全局变量置为 null,导致内层函数被释放,导致外层函数的AO被释放
最后在来举几个栗子:
1. 简单的例子
function factory () {
var num = 1;
return function () {
console.log( i++ );
}
}
var getNum = factory(); // => function ...
getNum(); // => ?
getNum(); // => ?
getNum(); // => ?
i++ ; // 污染
getNum(); // => ?
画图理解上述栗子
代码运行到红线部分的时候,执行环境栈中仅有一个全局执行环境(window),此时 window 中有两个全局变量(标识符):factory 、getNum
此时的ESC中的活动执行环境为 factory,在factory的AO中,有变量 num,此时num的值为1. (绿色线条的关系就形成了闭包)
factoryECS出栈之后,由于getNum引用着 factory的内层函数,而内层函数的scope也引用着factory,所以factory的活动对象并没有被释放
当getNum的EC进栈之后,getNum的AO中并没有num变量,所以会向父级进行查找,找到之后console.log( num );并进行++操作;
[图片上传失败...(image-a7be63-1530276074470)]
原理同上。
2. 鄙视面试题
function outer () {
for (var i = 0, arr = []; i < 3; i++) {
arr[i] = function () { console.log(i); }
}
return arr;
}
var ot = outer(); // => arr
ot[0](); // =>?
ot[1](); // =>?
ot[2](); // =>?
画简图理解: