JS 学习笔记（3）闭包

闭包的定义：

闭包：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。（狠狠地抽象啊）

个人理解：闭包就是一个函数返回的内部函数，用于保护函数内的变量安全。

简单demo 1： obj跟obj2都保存了各自的a参数。

function outerFun()
{
var a=0;
function innerFun()
{
  a++;
  alert(a);
}
return innerFun;  //注意这里
}
var obj=outerFun();
obj();  //结果为1
obj();  //结果为2
var obj2=outerFun();
obj2();  //结果为1
obj2();  //结果为2

demo2:

这里解决一个简单的html问题

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>闭包演示</title>
<style type="text/css">
p {background:gold;}
</style>
<script type="text/javascript">
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
</script>
</head>
<body onload="init();">
<p>产品 0</p>
<p>产品 1</p>
<p>产品 2</p>
<p>产品 3</p>
<p>产品 4</p>
</body>
</html>

每次输出的i都是5.

针对以上问题。

可以使用几个方法解决

1. 将i 保存在每个元素对象里面。
function init1() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].i = i;
pAry[i].onclick = function() {
alert(this.i);
}
}
}function init1() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].i = i;
pAry[i].onclick = function() {
alert(this.i);
}
}
}

2.使用闭包操作

function init3() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function(arg){
pAry[i].onclick = function() {
alert(arg);
};
})(i);//调用时参数
}
}

demo3：使用闭包为操作person的level，每次为person的level加上不同级别

//使用闭包为每个Person 示例的level做修改，根据修改次数动态修改level
//传入一个level=1 的person。第一次修改level+1；第二次修改 level+2；第三次level+3；
   var Person=function(name,level){
       this.name=name;
    this.level=level;
   }
   Person.prototype.getLevel=function(){
    var tempLevel=this.level;
       var i=1;
    function addLevel(){
   var temp=i+tempLevel;
   i=i*2;
   return temp;
    }
    return addLevel;
   }
//jim 的level 修改了5次
var per1=new Person("jim",0);
var fun=per1.getLevel();
fun();
fun();
fun();
fun();
var level=fun();
alert(level);

//kevin 的level修改了3次
var per2=new Person("kevin",2);
var fun2=per2.getLevel();
fun2();
fun2();
var level2=fun2();
alert(level2);

参考文献：http://www.jb51.net/article/24101.htm

http://www.jb51.net/article/26553.htm

JS 学习笔记 （3） 闭包

闭包的定义：

猜你喜欢

JS 学习笔记（3）闭包