javascript之我对闭包的理解

zoukankan html css js c++ java

javascript之我对闭包的理解

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

例:

<!DOCTYPE HTML>
<html>

<head>

<meta charset="utf-8" />

<title>闭包演示</title>

<script type="text/javascript">

uniqueID = (function(){ //这个函数的调用对象保存值
   var id = 0; //这是私有恒久的那个值
   //外层函数返回一个有权访问恒久值的嵌套的函数
   //那就是我们保存在变量uniqueID里的嵌套函数.
   return function(){return id++;}; //返回,自加.
})(); //在定义后调用外层函数.
</script>

</head>
<body>

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

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

查看全文

相关阅读:
冲刺（五）
第九周总结
 冲刺（四）
2020年寒假假期总结0114
2020年寒假假期总结0113
大二暑假第一周总结--初次安装配置Hadoop
2020年寒假假期总结0112
大三课堂测试总结20191113
大二暑假第七周总结--开始学习Hadoop基础（六）
大二暑假第六周总结--开始学习Hadoop基础（五）

原文地址：https://www.cnblogs.com/xlhblogs/p/2183807.html