闭包定义:方法里面返回另一个方法
function a(){
let a1 = 1;
return function(){
return a1
}
}
闭包意义:
延长变量的生命周期
创建私有环境
let a = '小明'
function fn1(){
let b = 1
console.log(a)
}
console.log(b) //undefine
fn1() //'小明'
AO->artitude object目标对象 程序运行时会生成一个ao用于保存所有的方法和局部变量,全局变量不在ao里面
作用域链:
let name = '小明'
function fn2(){
let name = '小白'
function fn3(){
let name = '小红'
console.log(name)
}
fn3()
}
fn2() //小红
//如果注释掉小红的赋值则得到小白,注释掉小白得到小明
//沟通内外部方法的桥梁
function outer(){
let a1 = 11
let a2 = 222
return function inner(){
return a1
}
}
function fn5(){
let getInnerData = outer()
console.log(getInnerData) //ƒ inner(){return a1}
console.dir(getInnerData) //可以在Scope中看到a1(Closur闭包),即a1没有被清理,污染全局
}
fn5()
闭包会常驻内存->慎用闭包
提问:为什么Vue中的data()是一个函数
其实这为闭包的设计。Vue是一个单一的应用,Vue中有很多的组件,每个组件都有data().
通过闭包为每一个组件建立一个私有域空间,保证各个组件之间的data相互不影响,每个组件都有一块私有的作用域
//计数器
let makeCounter = function(){
let num = 0
function changeBy(val){
num+=val
}
//外部无法拿取到num和changeBy函数,只可拿取到return里面的内容
return {
add:function(){
changeBy(1)
},
reduce:function(){
changeBy(-1)
},
value:function(){ //查询
return num
}
};
};
let counter1 = makeCounter()
let counter2 = makeCounter()
counter1.add()
counter1.add()
counter2.add()
console.log(counter1.value()) //2
console.log(counter2.value()) //1
//都是使用同一个闭包创建出来的,但是每一个都有属于自己的词法作用域,互相不干扰。
// vue组件的创建正是利用此原理