Variable de propriété indéfinie dans le littéral d'objet utilisant ce mot-clé

Question

J'essaie de comprendre la POO et c'est ma première véritable tentative. Je suis confus pourquoi la variable de propriété word dans l'objet init n'est pas disponible dans la fonction console.log checkLetter même si j'utilise le mot clé this. Dans ma fonction pickWord je suis capable d'utiliser this.word sans aucun problème. Comment puis-je rendre la variable word et this.word.length disponible à ?

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

Le gestionnaire d'événements key.onclick est appelé dans le contexte de l'élément. Donc 'ceci' est l'élément. Il existe de nombreuses façons de contourner ce problème. Une telle façon est de lier la valeur de « ceci » à l'objet init:

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

Edit: si vous avez besoin d'accéder à l'élément du gestionnaire d'événements, vous pouvez inclure l'événement en tant que paramètre de fonction, et accéder à l'élément en utilisant la propriété 'currentTarget'. Par exemple. evt.currentTarget.

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