js 闭包的理解

最新推荐文章于 2023-06-09 15:41:05 发布

dinxin横刀一笑

最新推荐文章于 2023-06-09 15:41:05 发布

阅读量387

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/u011365716/article/details/51539441

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.0.min.js" ></script>
<script>
(function(){

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1;};
　　　　return function(){console.log("n:"+n)};
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

function f3(){
var n1=100;
nAdd3 = function(){n1+=1;};
return n1;
}
var result3 = f3();
console.log("result3:"+result3);

var person = (function() {
var name = 'name';
var person = {};
function sayName() {
alert(name);
}
person.sayName = sayName;
return person;
})();

function outer(){
var localVal = 30;
return localVal;
}
console.log(outer()); // 30

function outer2(){
var localVal = 30;
return function(){
return localVal;
}
}
var func = outer2();
console.log(func()); // 30
console.log(outer2()()); // 30

/*!function(){
var localData = "localData here";
document.addEventListener("click", function(){
console.log(localData);
})
}*/

/* 常见错误之循环闭包 start */
$(function(){
$("#testDiv").html("<div id='div1'>111</div><div id='div2'>222</div><div id='div3'>333</div>");
for(var i=0;i<3;i++){
/*document.getElementById("div"+(i+1)).addEventListener("click",function(){
alert(i); // 3
});*/

// 立即执行
(function(i){
document.getElementById("div"+(i+1)).addEventListener("click",function(){
alert(i); // 0, 1, 2
});
})(i);

// 立即执行
/*!function(i){
document.getElementById("div"+(i+1)).addEventListener("click",function(){
alert(i); // 0, 1, 2
});
}(i);*/
}
});
/* 常见错误之循环闭包 end */

/* 闭包-封装 start */
(function(){
var _userId = 23492;
var _typeId = 'item';
var exports = {};
function converter(userId){
return +userId;
}

exports.getUserId = function(){
return converter(_userId);
}

exports.getTypeId = function(){
return _typeId;
}

window.exports = exports;
})();
console.log(exports.getUserId());
console.log(exports.getTypeId());
/* 闭包-封装 end */
})();
</script>
</head>
<body>
<div id="testDiv">

</div>
<pre>
闭包的好处：
（1）不增加额外的全局变量，
（2）执行过程中所有变量都是在匿名函数内部。
闭包的缺点：
（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
</pre>

</body>

</html>

声明：转载请声明出处！！！

dinxin横刀一笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js 闭包的理解

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;script type="text/javascript" src="../js/jquery-1.8.0.min.js" &am
复制链接

扫一扫