关于javascript:闭包面试必备的js知识百发百中

10次阅读

共计 4602 个字符,预计需要花费 12 分钟才能阅读完成。

1、概念

闭包函数:申明在一个函数中的函数,叫做闭包函数。
闭包:外部函数总是能够拜访其所在的内部函数中申明的参数和变量,即便在其内部函数被返回(寿命终结)了之后。

2、特点

  • 让内部拜访函数外部变量成为可能;
  • 局部变量会常驻在内存中;
  • 能够防止应用全局变量,避免全局变量净化;
  • 会造成内存透露(有一块内存空间被长期占用,而不被开释)

3、闭包的创立

闭包就是能够创立一个独立的环境,每个闭包外面的环境都是独立的,互不烦扰。闭包会产生内存透露,每次内部函数执行的时候,内部函数的援用地址不同,都会创立一个新的地址。但但凡以后流动对象中有被外部子集援用的数据,那么这个时候,这个数据不删除,保留一根指针给外部流动对象。
闭包内存透露为:key = value,key 被删除了 value 常驻内存中;局部变量闭包升级版(两头援用的变量)===> 自在变量;

可能了解起来比拟麻烦,请看上面的例子再回头看概念会了解的更透彻!

4、闭包的利用场景

!!!!!论断:闭包找到的是同一地址中父级函数中对应变量最终的值
这句论断是最终秘诀,每个例子请自行带入这个论断!!

~~~例例例 1111

function funA(){
 var a = 10;
 return function(){alert(a);
 }
}
var b = funA()
b(); // 10

解析:函数 funA 的返回值是一个匿名函数,匿名函数中应用了其父级函数 funA
申明的局部变量 a,这就是闭包。在函数内部,申明全局变量 b,给 b 赋值为 funA
函数的执行后果,而 funA 函数的执行后果是匿名函数这个返回值,所以 b 就是
function(){alert(a)}, 而后执行 b,即 alert(a),a 为 10

~~~例例例 2222

function outerFn(){
 var i = 0; 
 function innerFn(){
 i++;
 console.log(i);
 }
 return innerFn;
}
var inner = outerFn();  // 每次内部函数执行的时候, 都会开拓一块内存空间, 内部函数的地址不同,都会从新创立一个新的地址
inner();
inner();
inner();
var inner2 = outerFn();
inner2();
inner2();
inner2();   //1 2 3 1 2 3


解析:每次内部函数执行的时候, 都会开拓一块内存空间, 内部函数的地址不同,都会从新创立一个新的地址!!!!inner 赋值为 outerFn 函数调用的返回值 innerFn,
inner()第一次执行 i ++ 后为 1,因为局部变量 i 会常驻在内存中,所以再次调用
inner()后为 2,以此类推输入 1 2 3,but 第二次从新赋值 inner2,再次执行了外
部函数,所以会开拓一块内存空间,因为内部函数的地址指向不同,就从新创立
了一个新地址,i 重头开始,同 inner(),再次输入 1 2 3

~~~例例例 3333

var i = 0;
function outerFn(){function innnerFn(){
 i++;
 console.log(i);
 }
 return innnerFn;
}
var inner1 = outerFn();
var inner2 = outerFn();
inner1();
inner2();
inner1();
inner2();     //1 2 3 4
​
解析:首先全副变量 1,inner1 和 inner2 为内部函数 outerFn 的不同地址,返回值都是
innnerFn,第一次执行 inner1(),即全局变量 i 为 1,第一次执行 inner2(),尽管
是不同地址开拓不同内存,然而因为是全局变量不会再次执行扭转 i 的值,所以始终累加
​

~~~例例例 4444

function fn(){
 var a = 3;
 return function(){return  ++a;}
}
alert(fn()());  //4
alert(fn()());  //4
​
解析:a++ 先赋值,自身再 ++,例 a =1,b=a++,则 a 为 2,b 为 1
++a 先自身 ++,再赋值,例 a =1,b=++a,则 a 为 2,b 为 2
第一次 fn()执行后的返回值为 function(){return ++a}, 再次执行后果为 ++a, 即 4
第二次从新执行内部函数 fn,则从新开拓空间从头开始,后果一样

~~~例例例 55555

function outerFn(){
 var i = 0;
 function innnerFn(){
 i++;
 console.log(i);
 }
 return innnerFn;
}
var inner1 = outerFn();
var inner2 = outerFn();
inner1();
inner2();
inner1();
inner2();    //1 1 2 2
​
解析:每次内部函数执行的时候, 都会开拓一块内存空间, 内部函数的地址不同,都会从新创立一个新的地址

~~~例例例 6666

(function() { 
 var m = 0; 
 function getM() { return m;} 
 function seta(val) {m = val;} 
 window.g = getM; 
 window.f = seta; 
})(); 
f(100);
console.info(g());   //100  闭包找到的是同一地址中父级函数中对应变量最终的值
​

~~~例例例 7777

function a() { 
 var i = 0; 
 function b() { alert(++i); } 
 return b; 
} 
var c = a(); 
c();      //1 
c();      //2

~~~例例例 8888

function f() { 
 var count = 0; 
 return  function() { 
 count++; 
 console.info(count); 
 } 
} 
var t1 = f();
t1();     //1 
t1();     //2 
t1();     //3

~~~例例例 9999

var add = function(x) { 
 var sum = x; 
 var tmp = function(x) { 
 sum = sum + x; 
 return tmp; 
 } 
 tmp.toString = function() {return sum;}
 return tmp; 
} 
alert(add(1)(2)(3));     //6
​
解析:add(1)执行后 sum=1, 返回值是 tmp 函数
 add(1)(2)相当于调用 tmp 函数,sum = 1+2=3 , 返回值还是 tmp 函数
 add(1)(2)(3)再次调用 tmp 函数,sum = 3+3=6,返回值还是 tmp 函数
 因为 alert 进去的函数是字符串类型,所以把 tmp.toString 赋值为一个匿名函数,返回值是 sum,即 6 

~~~例例例 10 10 10

var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){(function(i){lis[i].onclick = function(){console.log(i);
 };
 })(i);       //0 1 2 3 4 事件处理函数中闭包的写法
}
​
解析:闭包,会把局部变量临时存储在内存中

~~~~例例例 11 11 11 11

function m1(){
 var x = 1;
 return function(){console.log(++x);
 }
}
 
m1()();   //2  都是 2 是因为闭包中,每次内部函数从新执行就从新开拓空间
m1()();   //2
m1()();   //2
 
var m2 = m1();
m2();   //2   内部能拜访函数外部的变量,是闭包,且变量会暂存
m2();   //3
m2();   //4

~~~例例例 12 12 12

var  fn=(function(){
 var  i=10;
 function  fn(){console.log(++i);
 }
 return   fn;
})() 
fn();   //11
fn();   //12

~~~例例例 13 13 13

function love1(){
 var num = 223;
 var me1 = function() {console.log(num);
 }
 num++;
 return me1;
}
var loveme1 = love1();
loveme1();   // 输入 224

~~~例例例 14 14 14

function fun(n,o) {console.log(o);
 return {fun:function(m) {return fun(m,n);//
    }
 };
}
var a = fun(0);   // 打印:undefined, 返回值:a={fun:function(m){return fun(m,0)}}
a.fun(1);   //fun(1,0) ===> 打印:0,返回值:{fun:function(m){return fun(m,1)}}
a.fun(2);   //fun(2,0) ===> 打印:0,返回值:{fun:function(m){return fun(m,2)}}
a.fun(3);   //fun(3,0) ===> 打印:0,返回值:{fun:function(m){return fun(m,3)}}
var b = fun(0).fun(1).fun(2).fun(3);   //undefined  0  1  2
//fun(0).fun(1) ==> 打印 undefined  0 返回值:{fun:function(m){return fun(m,1)}}
//fun(0).fun(1).fun(2) ==> 打印 1 返回值:{fun:function(m){return fun(m,2)}}
//fun(0).fun(1).fun(2).fun(3) ==> 打印 2 返回值:{fun:function(m){return fun(m,3)}}
​
var c = fun(0).fun(1);   // 打印 undefined 0 返回值 c ={fun:function(m){return fun(m,1)}}
c.fun(2);   //fun(2,1) ===> 打印 1
c.fun(3);   //fun(3,1) ===> 打印 1
​
答案:undefined 0 0 0
 undefined 0 1 2
 undefined 0 1 1
解析:函数 fun 会返回一个对象,键值是 fun 函数,此 fun 非彼 fun!!!!对象中
的 fun 又返回函数 fun(此处返回的指的是内部函数 fun)

~~~例例例 15 15 15

function fn(){var arr = [];
 for(var i = 0;i < 5;i ++){arr[i] = function(){return i;}
 }
 return arr;
}
var list = fn();
for(var i = 0,len = list.length;i < len ; i ++){console.log(list[i]());
}  //5 5 5 5 5
​
解析:list 为 fn 的执行后果,fn 的返回值是数组 arr,即[fn(),fn(),fn(),fn(),fn()],此时父级 fn 函数中的 i 是最终值 5,内部循环输入 list[i]的执行后果,都是闭包中的
外部函数 arr[i]的返回值 i,都是 5 

~~~例例例 16 16 16

function fn(){var arr = [];
 for(var i = 0;i < 5;i ++){arr[i] = (function(i){return function (){return i;};
 })(i);
 }
 return arr;
}
var list = fn();
for(var i = 0,len = list.length;i < len ; i ++){console.log(list[i]());
}  //0 1 2 3 4
​
解析:立刻执行函数会存储每一次 i 的后果
正文完
 0