您的位置：首页 > 其它

闭包复杂习题

2016-05-23 00:00 295 查看

<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一次就产生一个函数实例
}
}

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

标签：

相关文章推荐

新的分享

章节导航