1

这是我的问题的性质：

function theObject(){
    this.theMethod = function(theParameter){
    //code that uses theParameter
    }

    this.anotherMethod = function(){
        for(var x = 0; x < 10; x++){
            document.writeln("<img src = 'loc.jpg' onclick ='" + this + ".theMethod(" + x  + ")'>");
        }
    }

我认为很容易看到我在这里尝试做什么......但它不起作用。HTML 不知道我的任何“类”是什么。我尝试了很多变体，包括使用 getElementById().addEventListener() 但使用该路由，for 循环变量从我下面发生了变化。

你怎么做到这一点？请不要 jquery 并且“theMethod”必须保持封装状态。

谢谢

4

3 回答 3

1

您不能使用字符串来设置对闭包起作用的事件；正确的方法是：

for (var x= 0; x < 10; x++) {
    var img = document.createElement('img');
    img.src = "loc.jpg";
    img.onclick = (function(self,x){
                       return function(){
                           self.theMethod(x);
                       }
                   })(this,x);
    document.appendChild(img);
}

我知道代码看起来很复杂并且引入了self但不幸的是这在 Javascript 中是必要的，因为this它不仅仅是一个常规的局部变量，而且因为没有局部作用域而只有函数作用域。

如果没有这种双重包装技巧（在 Javascript 中经常使用），所有图像都会调用传递相同值而不是图像索引的方法。

当您使用字符串设置事件处理程序时，代码将eval在全局范围内使用，因此通常不可能让该代码使用局部变量。此外，对象（如构造函数中的当前对象引用this）和闭包不能转换为字符串并从字符串中解析。

于 2013-10-12T05:56:59.683 回答
1

这应该适合你。这是一个工作演示

function theObject(){

  this.theMethod = function(theParameter){
    //code that uses theParameter
  };

  this.anotherMethod = function(){
    for(var x = 0; x < 10; x++){
      var img = document.createElement("img");
      img.src = "loc.jpg";
      img.onclick = this.theMethod.bind(this, x);
      document.appendChild(img);
    }
  }
}

使用Function.prototype.bind需要 ECMAScript 5 或更高版本。如果需要支持旧版恐龙浏览器，请查看es5-shim

如果您仍然无法支持.bind，@6502 的答案是您的下一个最佳选择。

于 2013-10-12T06:12:05.913 回答
0

我怀疑function theObject = new function(){变成var theObject = new function(){会解决你的问题。

于 2013-10-12T05:46:47.897 回答