Как вызвать функцию прототипа в функции прототипа onclick event

Question

Как я могу вызвать функцию прототипа внутри внутри другой функции прототипа onclick событие в JavaScript?

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 представляет объект HTML td, а не 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); 
      }; 
     } 
    } 
}