what 闭包？
- 红宝书(p178)上对于闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数
- MDN 对闭包的定义：闭包是指那些能够访问自由变量的函数。
（其中自由变量，指在函数中使用的，但既不是函数参数arguments也不是函数的局部变量的变量，其实就是另外一个函数作用域中的变量。）
闭包产生的原因?
首先要明白作用域链的概念，其实很简单，在ES5中只存在两种作用域————全局作用域和函数作用域，当访问一个变量时，解释器会首先在当前作用域查找标示符，如果没有找到，就去父作用域找，直到找到该变量的标示符或者不在父作用域中，这就是作用域链，值得注意的是，每一个子函数都会拷贝上级的作用域，形成一个作用域的链条
闭包有哪些表现形式?
- 返回一个函数
- 作为函数参数传递
使用场景
① 返回值
function fn(){
var name="lijq";
return function(){
return name;
}
}
var fncopy = fn();
console.log(fncopy()) //lijq
② 函数赋值
var fn2;
function fn(){
var name="lijq";
//将函数赋值给fn2
fn2 = function(){
return name;
}
}
fn() //要先执行进行赋值，
console.log(fn2()) //执行输出lijq
③ 函数参数
function fn(){
var name="lijq";
return function callback(){
return name;
}
}
var fn1 = fn() //执行函数将返回值（callback函数）赋值给fn1，
function fn2(f){
//将函数作为参数传入
console.log(f());//执行函数，并输出
}
fn2(fn1)//执行输出lijq
④ IIFE
(function(){
var name="hello";
var fn1= function(){
return name;
}
//直接在自执行函数里面调用fn2，将fn1作为参数传入
fn2(fn1);
})()
function fn2(f){
//将函数作为参数传入
console.log(f());//执行函数，并输出
}
⑤ 循环赋值
//每秒执行1次，分别输出1-10
for(var i=1;i<=10;i++){
// IIFE
(function(j){
//j来接收
setTimeout(function(){
console.log(j);
},j*1000);
})(i) //i作为实参传入
}
// 也可以使用let 替换var
⑥ getter/setter
function fn(){
var name='lijq'
setName=function(val){
name = val;
}
getName=function(){
return name;
}
//将setName，getName作为对象的属性返回
return {
setName,
getName
}
}
var fn1 = fn();//返回对象，属性setName和getName是两个函数
console.log(fn1.getName());//lijq
fn1.setName('lijq-change');//setter修改闭包里面的name
console.log(fn1.getName());//lijq-change
⑦ 缓存cache
// 比如求和操作，如果没有缓存，每次调用都要重复计算，采用缓存已经执行过的去查找，查找到了就直接返回，不需要重新计算
var fn=(function(){
var cache={};//缓存对象
var calc = function(arr){//计算函数
var sum=0;
//求和
for(var i=0;i<arr.length;i++){
sum+=arr[i];
}
return sum;
}
return function(){
var args = Array.prototype.slice.call(arguments,0);//arguments转换成数组
var key=args.join(",");//将args用逗号连接成字符串
var result , tSum = cache[key];
if(tSum){//如果缓存有
console.log('从缓存中取：',cache)//打印方便查看
result = tSum;
} else {
//重新计算，并存入缓存同时赋值给result
result = cache[key]=calc(args);
console.log('存入缓存：',cache)//打印方便查看
}
return result;
}
})();
fn(1,2,3);
fn(1,2,3);
fn(1,2,3,4,5);
fn(1,2,3,4,5,8);
⑧ 迭代器
var arr =['a1', 'b2', 123];
function incre(arr){
var i=0;
return function(){
//这个函数每次被执行都返回数组arr中 i下标对应的元素
return arr[i++] || 'done';
}
}
var next = incre(arr);
console.log(next());//a1
console.log(next());//b2
console.log(next());//123
console.log(next());//done
网友评论