在循环内错误使用函数定义(js的问题)

简介: 在循环内错误使用函数定义(js的问题)

考虑下面代码:

var elements = document.getElementsByTagName('input');
var n = elements.length;    // Assume we have 10 elements for this example
for (var i = 0; i < n; i++) {
    elements[i].onclick = function() {
        console.log("This is element #" + i);
    };
}

根据上面的代码,如果有10input 元素,点击任何一个都会显示 "This is element #10"。 这是因为,当任何一个元素的onclick被调用时,上面的for循环已经结束,i的值已经是10了(对于所有的元素)。

我们可以像下面这样来解决这个问题:

var elements = document.getElementsByTagName('input');
var n = elements.length;   
var makeHandler = function(num) { 
     return function() {  
         console.log("This is element #" + num);
     };
};
for (var i = 0; i < n; i++) {
    elements[i].onclick = makeHandler(i+1);
}

makeHandler 是一个外部函数,并返回一个内部函数,这样就会形成一个闭包,num 就会调用时传进来的的当时值,这样在点击元素时,就能显示正确的序号。

相关文章
|
8月前
|
JavaScript
在循环内错误使用函数定义(js的问题)
在循环内错误使用函数定义(js的问题)
40 0
|
6月前
|
设计模式 JavaScript 前端开发
JS 代码变量和函数的正确写法
JS 代码变量和函数的正确写法
60 3
|
7月前
|
设计模式 JavaScript 前端开发
JS 代码变量和函数的正确写法大分享
在开发中,变量名,函数名一般要做到清晰明了,尽量做到看名字就能让人知道你的意图,所以变量和函数命名是挺重要
39 2
|
7月前
|
设计模式 JavaScript 前端开发
JS 代码中变量和函数的正确写法总结
**代码规范与最佳实践摘要** 1. 使用可读性强的变量名,如`currentDate`代替`yyyymmdstr`。 2. 对同一类型变量使用相似命名,如`getUser()`代替`getUserInfo()`。 3. 变量名应具有描述性,避免使用难以理解的数字,如`MILLISECONDS_IN_A_DAY`代替`86400000`。
46 2
|
8月前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
8月前
|
JavaScript
js循环的几种方法
js循环的几种方法
36 2
|
JavaScript
JS——流程控制,函数,数组
JS——流程控制,函数,数组
|
JavaScript 前端开发 索引
js常用的循环方法
js常用的循环方法
124 0
|
JavaScript
js循环判断的方法
js循环判断的方法
|
JavaScript
JS|函数的返回值
JS|函数的返回值
73 0