js 闭包的理解

原创 2016年05月30日 17:13:44
<!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>

声明:转载请声明出处!!!

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

js闭包理解之倒计时

  • 2014年07月11日 15:07
  • 587B
  • 下载

javascript深入理解js闭包

看了很多关于闭包的资料,觉得这个还不错,转载下,以共勉。 -------------写在前面 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠...

javascript深入理解js闭包

javascript深入理解js闭包 作者: 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 一、变量的作用域 ...

【02】带你一分钟理解闭包--js面向对象编程

上一篇《简单粗暴地理解js原型链--js面向对象编程》没想到能攒到这么多赞,实属意外。分享是个好事情,尤其是分享自己的学习感悟。所以网上关于原型链、闭包、作用域等文章多如牛毛,很多文章写得很深入很专业...

js闭包理解

//做一只蜗牛吧,一步一步往上爬;但傻逼才愿意,蜗牛速度那么慢… //转行做个新手,发现写代码博客啥的真需要一股认真劲儿,在这里贡献一份js函数(闭包)学习心得,不当之处望各路高手们指点,谢过。 ...
  • yjmwkxz
  • yjmwkxz
  • 2014年10月26日 19:45
  • 420

JS 关于原型和闭包的理解

闭包是一个比较抽象的概念,但是他也是js能力提升中无法绕过的一环,几乎每次面试必问的问题,因为在回答的时候.你的答案的深度,对术语的理解以及js内部解释器的运作方式的描述,都是可以看出你js实际水平的...

一分钟带你理解闭包--js面向对象编程

网上关于原型链、闭包、作用域等文章多如牛毛,很多文章写得很深入很专业,而我却喜欢用更简单方式来解说简单的事情。比如,什么是闭包?先看一段代码:function a(){ var n = 0; ...

js进阶学习之--闭包的理解

js进阶学习之--闭包 闭包概念:一个函数引用另一个函数中的变量的函数叫做闭包 //父函数中的变量不会被释放 function closure(){ var i = 0;...

深入理解JS—闭包

上次和大家聊过作用域后,了解了变量的作用域,并且知道如何从外部读取局部变量,那么接下来让我们通过一个实例来回顾下:function f1(){     n=999;     function f2()...

【JavaScript】3.JS中的闭包之我理解

闭包是一个比较抽象的概念,尤其对js新手来说,书上的解释实在是晦涩,对我来说也是一样,但是它也是js提升中无法绕过的一环,几乎每次面试必问的问题,因为在回答的时候,你的答案的深度,对术语的理解以及js...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js 闭包的理解
举报原因:
原因补充:

(最多只允许输入30个字)