如何在原型函数onclick事件中调用原型函数

Question

如何在JavaScript中的另一个原型函数onclick事件内调用原型函数？

function foo(){ 
    this.table = ''; 
} 

foo.prototype.abc = function(){ 
    this.table = document.getElementById("tableID"); 
    if (table != null) { 
     for (var i = 0; i < table.rows.length; i++) { 
      for (var j = 0; j < table.rows[i].cells.length; j++) 
      table.rows[i].cells[j].onclick = function() { 
       this.xyz(this); 
      }; 
     } 
    } 
} 

foo.prototype.xyz = function(tableCell){ 
    alert(tableCell.innerHTML); 
} 

如果我只是把这个tableText函数而不是this.xyz它会正常工作，但使用this.xyz在控制台this.xyz(this)给出错误不是一个函数

function tableText(tableCell) { 
    alert(tableCell.innerHTML); 
} 

我的浏览器显示错误，但不是的jsfiddle JS Fiddle

Answer 1

在此代码块中：

table.rows[i].cells[j].onclick = function() { 
    this.xyz(this); 
}; 

this代表tdHTML对象，而不是foo。您必须保留foo的参考，并将其传递到onclick函数，如下所示：

foo.prototype.abc = function(){ 
    var that = this; //Keep a reference of `foo` 
    this.table = document.getElementById("tableID"); 
    if (table != null) { 
     for (var i = 0; i < table.rows.length; i++) { 
      for (var j = 0; j < table.rows[i].cells.length; j++) 
      table.rows[i].cells[j].onclick = function() { 
       //this.xyz(this); 
       // "that" refer to the function foo 
       // "this" refer to the current table cell (td) 
       that.xyz(this); 
      }; 
     } 
    } 
}