Eigenschaftsvariable undefined im Objektliteral mit diesem Schlüsselwort

Question

Ich versuche OOP zu verstehen und dies ist mein erster echter Versuch. Ich bin verwirrt, warum die word Eigenschaftsvariable im init Objekt in der checkLetter Funktion console.log nicht verfügbar ist, obwohl ich das this Schlüsselwort verwende. In meiner pickWord Funktion kann ich this.word ohne Probleme verwenden. Wie kann ich die word Variable und this.word.length für checkLetter verfügbar machen?

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

Der Ereignishandler key.onclick wird im Kontext des Elements aufgerufen. Das ist also das Element. Es gibt zahlreiche Möglichkeiten, dieses Problem zu umgehen. Ein solcher Weg ist, den Wert von ‚this‘ auf das init-Objekt zu binden:

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

Edit: Wenn Sie den Zugriff auf das Element der Event-Handler benötigen, können Sie das Ereignis als Funktionsparameter umfassen, und das Element zugreifen Verwenden der Eigenschaft 'currentTarget'. Z.B. evt.currentTarget.

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