属性使用此关键字在对象字面量中未定义的变量

Question

我正在尝试理解 OOP，这是我第一次真正的尝试。我很困惑为什么 init 对象中的 word 属性变量在 checkLetter 函数 console.log 中不可用，即使我正在使用 this 关键字。在我的 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' 是元素。有许多方法可以解决此问题。一种方法是将 'this' 的值绑定到 init 对象：

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

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

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

属性使用此关键字在对象字面量中未定义的变量

Property variable undefined in object literal using this keyword

javascript

oop

scope

this

object-literal

属性 使用此关键字在对象字面量中未定义的变量

Property variable undefined in object literal using this keyword

javascript

oop

scope

this

object-literal

属性使用此关键字在对象字面量中未定义的变量