侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

闭包复杂习题

2024-05-13 星期一 / 0 评论 / 0 点赞 / 92 阅读 / 2666 字

<body onload="init()"> <p id="p0">0</p><p id="p1">1</p><p id="p2">2</p><p id="p3">3</p><p id="p4"

<body onload="init()">    <p id="p0">0</p>	<p id="p1">1</p>	<p id="p2">2</p>	<p id="p3">3</p>	<p id="p4">4</p> </body>

基于上段代码实现点击每一个p元素输出相应的数字

0

1

2

3

4

1、通过添加数组的属性实现

function init(){    var pAry = document.getElementsByTagName("p");    for( var i=0; i<pAry.length; i++ ){        pAry[i].i = i;        pAry[i].onclick=function(){          console.log(this.i);      }    }  }

2、通过添加到数组的方法的属性上实现

function init() {  var pAry = document.getElementsByTagName("p");  for( var i=0; i<pAry.length; i++ ) {		(pAry[i].onclick = function() {          console.log(arguments.callee.i);      }).i = i;  }}

3、每执行一次代码产生一个新的arg变量,每次存在数组中的函数记录的需要访问的arg地址都是不同的,所以可以得到不同的值

function init() {   var pAry = document.getElementsByTagName("p");   for( var i=0; i<pAry.length; i++ ) {  (function(arg){      pAry[i].onclick = function() {            alert(arg);         };   })(i);    }}

4、原理同上,只是将函数参数中的变量放进了函数中进行赋值

function init() { var pAry = document.getElementsByTagName("p");  for( var i=0; i<pAry.length; i++ ) {     (function () {       var temp = i;       pAry[i].onclick = function() {          alert(temp);        }      })();  }}

5、同上,只是通过立即执行函数给变量赋值,然后返回另一个函数到数组里面

function init(){   var pAry = document.getElementsByTagName("p");   for( var i=0; i<pAry.length; i++ ) {    pAry[i].onclick = function(arg) {         return function() {//返回一个函数        alert(arg);      }    }(i);   }}

6、每次产生一个新的实例放进数组

<script>  function init() {     var pAry = document.getElementsByTagName("p");      for( var i=0; i<pAry.length; i++ ) {       pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例    }}

 

广告 广告

评论区