javascript - Javascript 中的循环、闭包和 addEventListener

Question

我很抱歉这个不那么具体的标题，因为我的英语不够好，无法在标题中清楚地描述这种情况。

我有这样的代码:

var e = document.getElementsByClassName( "test" );
var myFunc = function( e ) { 
  e = e + 1; 
};

for ( var i = 0, l = e.length; i < l; i++ ) {
    var t = e[ i ];
    var j = 0;
    (function( n, num ){
        num = 0;
        n.addEventListener("click", function() {
          myFunc( num );
          console.log( num )
        });
    }( t, j ));
}

我的目的是让变量j的值增加，但每次.test后我仍然得到j=0的结果点击。

Demo

Answer 1

您的问题是 JavaScript 不是通过引用传递原始值(如数字)，而是通过值传递。 myFunc 函数必须返回一些内容，您不能分配给它的参数来更改“外部”值。

这是一种更现代的方法，基于支持 getElementsByClassName() 的浏览器也支持 Array.prototype.forEach() 的合理假设。

以下内容为每个 HTML 元素创建一个带有 num 的闭包。

var elems = document.getElementsByClassName("test"),
    myFunc = function(e) { 
        return e += 1; 
    };

[].slice.call(elems).forEach(function (elem) {
    var num = 0;
    elem.addEventListener("click", function () {
        num = myFunc(num);
        this.textContent = this.textContent.replace(/\d*$/, num);
    });
});

<button class="test">Test 0</button>
<button class="test">Test 0</button>
<button class="test">Test 0</button>

<小时/>

Javascript确实通过引用传递对象，因此只需稍加更改即可工作:

var elems = document.getElementsByClassName("test"),
    myFunc = function(properties) { 
        properties.num += 1; 
    };

[].slice.call(elems).forEach(function (elem) {
    var properties = {
            num: 0
        };
    elem.addEventListener("click", function () {
        myFunc(properties);
        this.textContent = this.textContent.replace(/\d*$/, properties.num);
    });
});

<button class="test">Test 0</button>
<button class="test">Test 0</button>
<button class="test">Test 0</button>