闭包

闭包

闭包就是能够读取其他函数内部变量的函数

 

特点

 

  让外部访问函数内部变量成为可能；

 

  局部变量会常驻在内存中；

 

  可以避免使用全局变量，防止全局变量污染；

 

  会造成内存泄漏（有一块内存空间被长期占用，而不被释放）

 

闭包的创建：­­­
闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰。闭包会发生内存泄漏，每次外部函数执行的时候，外部函数的引用地址不同，都会重新创建一个新的地址。但凡是当前活动对象中有被内部子集引用的数据，那么这个时候，这个数据不删除，保留一根指针给内部活动对象。

闭包内存泄漏为： key = value，key 被删除了 value 常驻内存中; 局部变量闭包升级版（中间引用的变量） => 自由变量；

 

function fn(){
var n=10;
return n;
}
fn();
不算闭包，相当于全局作用域中接受了一个新的变量，这个变量是由局部变量n复制的，当fn执行完毕后 局部变量n会被销毁，访问不到

 

/* 例子1 */

function funA(){
var a = 10; // funA的活动对象之中;
return function(){ //匿名函数的活动对象;
alert(a);
}
}
var b = funA();
b(); //10

 

/* 例子2 */

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

 

/* 例子3 */

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

 

/* 例子4 */

function fn(){
var a = 3;
return function(){
return ++a; 
}
}
alert(fn()()); //4
alert(fn()()); //4 

 

/* 例子5 */

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

 

/* 例子6 */

(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 闭包找到的是同一地址中父级函数中对应变量最终的值

 

/* 例子7 */

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

 

返回b不是返回函数值，而是返回了函数定义，你可以 var c = a();这个度时候c就等于b了，你可以继续c();看到alert(1)
这个东西一般用在多态的处理上，根据外层的专不同方法返回一个子方法以便下一步的操作。

/* 例子8 */

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

 

/* 例子9 */

var add = function(x) { 
var sum = 1; 
var tmp = function(x) { 
sum = sum + x; 
return tmp; 
} 
tmp.toString = function() { 
return sum; 
}
return tmp; 
} 
alert(add(1)(2)(3)); //6

 

/* 例子10 */

var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
(function(i){
lis[i].onclick = function(){
console.log(i);
};
})(i); //事件处理函数中闭包的写法
}

 

/* 例子11 */

function m1(){
var x = 1;
return function(){
console.log(++x);
}
}

m1()(); //2
m1()(); //2
m1()(); //2

var m2 = m1();
m2(); //2
m2(); //3
m2(); //4

 

/* 例子12 */

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

 

/* 例子13 */

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

 

/* 例子14 */

function fun(n,o) {
console.log(o);
return {
fun:function(m) {
return fun(m,n);
}
};
}
var a = fun(0); //undefined
a.fun(1); //0 
a.fun(2); //0 
a.fun(3); //0 
var b = fun(0).fun(1).fun(2).fun(3); //undefined 0 1 2
var c = fun(0).fun(1); 
c.fun(2); 
c.fun(3); //undefined 0 1 1

 

/* 例子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

 但是当执行到这里的时候，发现function，有一个变量i是未知的，并且在局部作用域中，也没有查找到相应的变量，那么按照作用域链的查找方式，就会向父级作用域去查找，这里的父级作用域中，确实是有变量i的，而i的值，却是经过for循环之后的值，i=5。所以也就出现了我们最初看到的效果。

/* 例子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

 

 
————————————————
版权声明：本文为CSDN博主「羊二哥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43586120/article/details/89456183