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

我试图理解OOP，这是我第一次真正的尝试。我不明白为什么

init

对象中的

word

属性变量在

checkLetter

function console.log中不可用，即使我使用的是

this

关键字。在我的

pickWord

函数中，我可以使用

这个.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();

var words=[“癌症”、“艾滋病”、“中风”、“糖尿病”]；
变量键=['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']；
点=0；
var init={
字：“，
单词索引：0，
点_状态：0，
pickWord:function（）{
this.word=words[this.word_index]；
this.displayDash（this.word）；
},
显示破折号：函数（word）{
for（变量i=0；i
在元素的上下文中调用key.onclick事件处理程序。所以“这”就是元素。有很多方法可以解决这个问题。其中一种方法是将“this”的值绑定到init对象：

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

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

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

您似乎知道，
checkLetter
中的
this
称为单击处理程序，它指的是单击的元素，因为您正在使用类似于
this.style
或
this.innerHTML
的东西。为什么您希望它同时指向
init
对象？在您的情况下，修复很简单，只需参考
init.word
。我希望它指向对象，因为它是在对象内部创建的。所以它最初不起作用的原因是因为我在
addKeys
函数中创建了onclick，然后尝试在
checkLetter
函数中单独使用
word
，它从对象中释放了对
this
关键字的引用？。它没有“松动”引用，它一开始就没有引用。
this
的值仅由函数的调用方式决定在addKeys函数中，现在当我单击元素时它不会运行。另外，如何访问
checkLetter
函数中的
word
变量？像这样：
if（point==elem.word.length）
？我花了一段时间让事情变得有意义，但我所要做的就是
if（elem.innerHTML==letelems[I].innerHTML）
然后一切都开始工作，我可以使用
if（point==this.word.length）
。这个问题帮助我学到了很多关于
这个
的知识，太棒了！当我了解了
这个
的工作原理后，我的JavaScript编程有了显著的改进。