Portée de « ce » en JavaScript

Question

J'ai une classe JavaScript qui ressemble à ceci:

function SomeFunction() 
{ 
    this.doSomething(function() 
    { 
     this.doSomethingElse(); 
    }); 

    this.doSomethingElse = function() 
    { 

    } 
} 

Ce code renvoie une erreur parce que la portée de cette « » à l'intérieur de la fonction qui est passé dans doSomething() est différent de celui de "ceci" en dehors de cette fonction.

Je comprends pourquoi c'est, mais quelle est la meilleure façon de gérer cela? C'est ce que je finis par faire:

function SomeFunction() 
{ 
    var thisObject = this; 

    this.doSomething(function() 
    { 
     thisObject.doSomethingElse(); 
    }); 

    this.doSomethingElse = function() 
    { 

    } 
} 

Cela fonctionne très bien, mais cela ressemble à un hack. Je me demandais juste si quelqu'un avait un meilleur moyen.

Answer 1

Ce commentateur avait ce que je recherchais (bien que les autres réponses sont bonnes aussi):

Kruger Voir cette @ Jon, consultez leur article pour l'appel aussi: https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Objects/Function/Apply - Jonathon 44 minutes il y a

Answer 2

C'est la solution de contournement correcte et généralement acceptée. C'est une sorte de kludgy mais c'est ce que tout le monde fait. En général, cette variable supplémentaire est nommé self, comme dans:

function SomeFunction() 
{ 
    var self = this; 

    this.doSomething(function() 
    { 
     self.doSomethingElse(); 
    }); 

    this.doSomethingElse = function() 
    { 

    } 
} 

Answer 3

this à une dynamique "portée". Cela signifie qu'il est mis en place par tout ce qui le lie, et this est lié par un "appel de méthode". Autrement dit, tout moment dans votre programme, vous voyez ceci: w.f() puis en f est exécuté, this est dynamiquement lié à f, même sif avait this dans son champ lexical.

La plupart des frameworks JavaScript offrent des fonctionnalités permettant de résoudre ce problème. Avec Prototype.js (par exemple), vous pouvez le faire:

this.doSomething(function() { this.doSomethingElse(); }.bind(this)); 

Votre "hack" est cependant très bien. Je fais généralement un (function (self) { ... })(this) autour de toutes les fonctions dont j'ai besoin d'une variable semblable à celle du this.

Answer 4

Il est également à noter que la prochaine version d'ECMAScript (la spécification de langage pour JavaScript) va introduire Function.bind(), ce qui vous permettra de spécifier un contexte permanent pour une fonction.