闭包是js开发惯用的技巧，什么是闭包？
闭包就是 能够访问另一个函数作用域的变量的函数
function f1( ){
let a = 2;
function f2(){
console.log(a)
}
return f2;
}
f1();
由此可以看出函数f2可以访问到f1的变量，所以我们就说f2是一个闭包函数，
从堆栈的角度看js函数
基本数据类型都存储在占内存中，而对象类型的值存储在堆内存中，占内存只存储对应的空间地址
基本数据类型：Number、String、Boolean、Null、Undefined
对应的存储关系
当我们执行 b = {m: 30} 的时候，堆内就有了新的对象 {m : 30}，栈内的b就会指向 {m : 30}
而堆内原有的 {m : 20} 会被程序引擎回首掉，节约内存空间。
let a1 = 1;
function fn1(){
let a2 = 2;
function fn2(){
console.log(a2)
}
fn2()
}
fn1()
栈
fn2的执行环境
变量 值
无
fn1的执行环境
变量 值
a2 2
fn2 引用地址
全局执行环境
变量 值
a1 1
fn1 引用地址
栈是一个先进后出的数据结构
1、在进入fn1前，此时处在全局环境下即window作用域下，在全局作用域下有一个变量a1
2、进入fn1，此时栈内就会push一个fn1的运行环境，在这个环境里有一个变量a2和函数对象 fn2，这里可以访问到自身执行环境和全局变量
3、进入fn2，此时栈内就会push一个fn2的运行环境，这里没有定义任何变量，但是在这里可以访问到fn1和全局环境下的变量，因为程序在访问变量时，是向底层栈一个个找，如果找到全局执行环境里都没有对应变量，则程序抛出underfined的错误。
4、随着fn2()执行完毕，fn2的执行环境被杯销毁，接着执行完fn1()，fn1的执行环境也会被销毁，只剩全局的执行环境下，现在没有a2变量，和fn2函数对象了，只有a1 和 fn1(函数声明作用域是window下)
在函数内访问某个变量是根据函数作用域链来判断是否存在的，而函数作用域连是程序根据函数所在的执行环境栈来初始化的
当程序调用某个函数时：准备执行环境，初始化函数作用域链和arguments参数对象
坑点1： 引用的变量可能发生变化
functionouter(){
varresult = [];
for（vari =0； i<10; i++）{
result.[i] =function(){
console.info(i)
} }
return result
}
看样子result每个闭包函数对打印对应数字，1,2,3,4,...,10, 实际不是，因为每个闭包函数访问变量i是outer执行环境下的变量i，随着循环的结束，i已经变成10了，所以执行每个闭包函数，结果打印10， 10， ..., 10
解决：
functionouter(){
varresult = [];
for（vari =0； i<10; i++）{
result.[i] =function(num){
return function(){
console.info(num);// 此时访问的num，是上层函数执行环境的num，数组有10个函数对象，每个对象的执行环境下的number都不一样} }(i)
}
return result
}
坑点2: this指向问题
var object = {
name:''object"，
getName： function() {
return function() {
console.info(this.name)
}
}
}
object.getName()() // underfined
// 因为里面的闭包函数是在window作用域下执行的，也就是说，this指向windows
坑点3：内存泄露问题
function showId(){
varel =document.getElementById("app")
el.onclick =function(){
aler(el.id) // 这样会导致闭包引用外层的el，当执行完showId后，el无法释放
}}
// 改成下面
function showId(){
varel =document.getElementById("app")
var id = el.id
el.onclick =function(){
aler(id)// 这样会导致闭包引用外层的el，当执行完showId后，el无法释放
}
el =null // 主动释放el
}
技巧1： 用闭包解决递归调用问题
function factorial(num){
if(num<=1) {
return1;
} else {
return num * factorial(num-1)
}
}
var anotherFactorial = factorial
factorial =null
anotherFactorial(4)// 报错 ，因为最好是return num* arguments.callee（num-1），arguments.callee指向当前执行函数，但是在严格模式下不能使用该属性也会报错，所以借助闭包来实现
// 使用闭包实现递归
function newFactorial= （functionf(num){
if(num<1) {
return1
}else{
returnnum* f(num-1)
}}）//这样就没有问题了，实际上起作用的是闭包函数f，而不是外面的函数newFactorial
网友评论