您的位置：首页 > Web前端 > JavaScript

javascript之我对闭包的理解

2011-09-21 13:27 295 查看

1.在函数外部可访问函数内部的变量

例:

<!DOCTYPE HTML>

<html>

<head>

uniqueID = (function(){ //这个函数的调用对象保存值

var id = 0; //这是私有恒久的那个值

//外层函数返回一个有权访问恒久值的嵌套的函数

//那就是我们保存在变量uniqueID里的嵌套函数.

return function(){return id++;}; //返回,自加.

})(); //在定义后调用外层函数.

</script>

</head>

<body>

alert(uniqueID)

document.writeln(uniqueID()); //0

alert(uniqueID)

document.writeln(uniqueID()); //1
　　　　 alert(uniqueID)

document.writeln(uniqueID()); //2

alert(uniqueID)

document.writeln(uniqueID()); //3

document.writeln(uniqueID()); //4

</script>

</body>

</html>

例子解析:本身uniqueId()这个函数在调用后id这个值就该应消亡,再次调用的时候再创建,但是运行出来的结果缺是递增的,因为函数有两个返回,第一个返回,返回了一个匿名函数,匿名函数又返回了一个值,这个值是闭包函数的一个内部变量,因为这个变量在匿名函数中进行了调用,所以他就不能消亡.所以一直递增

2.是变量值挂起来

例:

未使用闭包:

<!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>

输出:全是5

使用了闭包:

<!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++ ) {

(function(arg){

pAry[i].onclick = function() {

alert(arg);

}})(i);

}

}

</script>

</head>

<body onload="init();">

<p>产品 0</p>

<p>产品 1</p>

<p>产品 2</p>

<p>产品 3</p>

<p>产品 4</p>

</body>

</html>

输出:点击那个元素,显示对应元素的值

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航