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