このキーワードを使用してオブジェクトリテラルでプロパティ変数が定義されていません

Question

私はOOPを理解しようとしています。これが私の最初の試みです。私がthisキーワードを使用していても、オブジェクト内のwordプロパティ変数がcheckLetter関数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イベントハンドラは、要素のコンテキストで呼び出されます。だから、これが要素です。この問題を回避するには、さまざまな方法があります。

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

編集：このような方法の1つは、initオブジェクトに「この」の値をバインドすることであるあなたは、イベントハンドラの要素にアクセスする必要がある場合、あなたは関数のパラメータとしてイベントを含め、その要素にアクセスすることができます'currentTarget'プロパティを使用します。例えば。 evt.currentTarget。

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