闭包是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