javascript - 使用 this 关键字在对象字面量中未定义属性变量

Question

我正在尝试理解 OOP，这是我第一次真正的尝试。我很困惑为什么 word init 中的属性变量对象在 checkLetter 中不可用即使我使用 this 功能 console.log关键词。在我的pickWord我可以使用this.word功能没有任何问题。我怎样才能制作word变量和this.word.length可供 checkLetter ？

var words = ["cancer", "aids", "stroke", "diabetes" ];

var keys = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

point = 0;

var init = {
  word: "",
  word_index: 0,
  point_status: 0,
  pickWord: function(){
    this.word = words[this.word_index];  
    this.displayDashes(this.word);
  },

  displayDashes: function(word){
    for(var i = 0; i< word.length; i++){
      var blankLetter = document.createElement("div");

      var hiddenletter = document.createTextNode(word[i]);
      blankLetter.appendChild(hiddenletter);

      blankLetter.classList.add('dashes');

      var wordHolder = document.getElementById('wordHolder');

      wordHolder.appendChild(blankLetter);


    }

  },

  addKeys: function(){
    for (var i = 0; i < keys.length; i++){
      var key = document.createElement("div");
      key.classList.add('keys');

      key.onclick = this.checkLetter;

      var letter = document.createTextNode(keys[i]);
      key.appendChild(letter);

      var keyboard = document.getElementById('keyboard');

      keyboard.appendChild(key);


    }
  },

  checkLetter: function(){

   var letterElems = document.getElementsByClassName('dashes');

   this.style.backgroundColor = 'blue';

   for(var i = 0; i < letterElems.length; i++){
     if(this.innerHTML == letterElems[i].innerHTML){
       letterElems[i].style.backgroundColor = 'white';
       pointStatus = point++;

     }
   }
  // checkPoints(pointStatus);
   // console.log(point); 
   console.log("the word: " + this.word); 

   if(point == this.word.length){
      alert('you won ' + point + " points so far!");
      this.nextWord();

    }  
  },


  nextWord: function(){
      alert('im inside nexword');
      this.word_index++;
      this.pickWord();
  }
}

init.pickWord();
init.addKeys();
// init.displayDashes();

Answer 1

key.onclick 事件处理程序在元素的上下文中调用。所以“这个”就是元素。有多种方法可以解决此问题。其中一种方法是将“this”的值绑定(bind)到 init 对象:

key.onclick = this.checkLetter.bind(this);

编辑:如果您需要访问事件处理程序的元素，可以将事件作为函数参数包含在内，并使用“currentTarget”属性访问该元素。例如。 evt.currentTarget。

checkLetter: function(evt){
    var elem = evt.currentTarget;