Question

我正在努力了解OOP，这是我第一次尝试。我很困惑，为什么word对象中的init属性变量在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事件处理程序。所以＆＃39;这个＆＃39;是元素。有很多方法可以解决这个问题。一种方法是绑定＆＃39;这个＆＃39;的值。到init对象：

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

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

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

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

1 个答案: