Pourquoi "ceci" ne se met-il pas à jour pour faire référence à un nouvel objet?

Question

J'écris un jeu en ligne qui permet à un utilisateur de progresser d'un puzzle à l'autre, et si l'utilisateur fait des erreurs, chaque puzzle a un bouton de démarrage pour permettre à l'utilisateur de commencer ce casse-tête. Une version simplifiée de la structure du code est ci-dessous:

function puzzle(generator) { 

    this.init = function() { 
     this.generator = generator; 
     ... 
     this.addListeners(); 
    } 

    //fires when the puzzle is solved 
    this.completed = function() { 
     window.theSequence.next(); 
    } 

    this.empty = function() { 
     //get rid of all dom elements, all event listeners, and set all object properties to null; 
    } 

    this.addListeners = function() { 
     $('#startOver').click(function() { 
      window.thePuzzle.empty(); 
      window.thePuzzle.init(); 
     }); 
    } 
    this.init(); 
} 

function puzzleSequence(sequenceGenerator) { 

    this.init = function() { 
     //load the first puzzle 
     window.thePuzzle = new puzzle({generating json}); 

    } 

    this.next = function() { 
     //destroy the last puzzle and create a new one 
     window.thePuzzle.empty(); 
     window.thePuzzle = new puzzle({2nd generating json}); 
    } 

} 

window.theSequence = new puzzleSequence({a sequence generator JSON}); 

Le problème que j'ai est que si l'utilisateur a progressé au deuxième puzzle, si elles cliquez sur Démarrer dessus charge le premier casse-tête plutôt que le second. Après un peu de débogage, j'ai calculé que 'ceci', lorsqu'il est utilisé dans les méthodes par le deuxième casse-tête, contient pour une raison quelconque une référence au premier casse-tête, mais 'window.thePuzzle' - qui devrait être le même que - se réfère correctement au deuxième casse-tête.

Pourquoi «ceci» persiste-t-il à se référer au premier?

Permettez-moi de savoir si vous avez besoin de plus d'exemples de code

Answer 1

$ ('# Startover') cliquez sur (this.empty).

Vous avez pris la méthode empty et détacha de this passer en fonction non liée à jQuery ordinaire. Quand il est rappelé, il n'aura aucune référence à la valeur d'origine de this. En fait, lorsqu'une fonction est appelée unbound, this se référera à window, donc vous gribouillerez ce que vous pensez être des propriétés sur les globals.

JavaScript ne lie pas les méthodes de la même manière que les autres langues. Voir par exemple. this answer pour une explication de ce qu'il fait réellement. Cela confond beaucoup de gens; Personnellement, je le considère comme l'un des pires défauts de JavaScript.

Answer 2

Il existe une très bonne (et claire) description de la façon exacte dont la référence this est traitée dans différents contextes à Quirksmode.