闭包,看这一篇就够了——带你看透闭包的本质

01月21日 收藏 0 评论 3 前端开发

闭包,看这一篇就够了——带你看透闭包的本质

文章声明:转载来源:https://blog.csdn.net/weixin_43586120/article/details/89456183

1、概念
闭包函数:声明在一个函数中的函数,叫做闭包函数
闭包:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。

2、特点
让外部访问函数内部变量成为可能;
局部变量会常驻在内存中;
可以避免使用全局变量,防止全局变量污染;
会造成内存泄漏(有一块内存空间被长期占用,而不被释放)

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

闭包内存泄漏为: key = value,key 被删除了 value 常驻内存中; 局部变量闭包升级版(中间引用的变量) => 自由变量;

上面的都是什么鬼,是人话么,能看懂早就看懂了,生气······
不过,答应我,看完例子再回看上面的概念,会理解的更!透!彻!
---------------------------------------------我是容易看懂的分界线-----------------------------------------------
4、闭包的应用场景
结论:闭包找到的是同一地址中父级函数中对应变量最终的值
最终秘诀就这一句话,每个例子请自行带入这个结论!!!!!!!!!!!!!

/* 例子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();
inner();
inner();
var inner2 = outerFn();
inner2();
inner2();
inner2(); //1 2 3 1 2 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

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

/* 例子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
C 3条回复 评论
coderpwh

这家笔试好难

发表于 2023-09-26 23:00:00
0 0
媲美

我想咨询一下产品经理对技术的要求有多高呢?请问数据科学专业投递平台型产品经理是否合适呢?我是海外留学生,并没有相关的产品实习经验,本科时期的实习经历也很少,都是会计师事务所的事情,感觉对这个岗位应聘没有任何帮助。由于今年疫情原因现在还在国外也没办法回去进行实习,现在秋招就快开始了真的很焦虑了

发表于 2023-09-21 23:00:00
0 0
无畏无所畏

喜欢这个老师的课

发表于 2023-06-27 21:00:00
0 0