Comment appeler une autre fonction dans le même espace de noms javascript?

Question

J'aime organiser mon javascript dans le style de l'espace de noms comme ci-dessous. Ce que je veux savoir: existe-t-il un autre moyen (plus court?) D'appeler myFirstFunction() depuis mySecondFunction()? J'ai essayé this.myFirstFunction() et ça ne fonctionne pas alors peut-être qu'il y a une sorte de truc mystérieux ici que je ne connais pas.

var myNameSpace = { 
    myFirstFunction: function(){ 
     alert("Hello World!"); 
    }, 
    mySecondFunction: function(){ 
     myNameSpace.myFirstFunction(); 
    } 
} 

Merci pour votre aide, comme d'habitude, les gens de SO! :)

Answer 1

Comme écrit dans votre exemple de code, this.myFirstFunction() fonctionnerait. Votre code est probablement simplifié pour illustrer votre problème, il serait donc probablement utile de voir le code pour savoir pourquoi il ne fonctionne pas avec this.

Une raison possible qui échoue serait si le code où vous appelez this.myFirstFunction() est à l'intérieur d'une fermeture. Si c'est le cas, this serait une référence à la fonction de fermeture, pas votre espace de noms et donc échouerait. Voir here pour un exemple artificiel basé sur votre code pour voir ce que je veux dire. Encore une fois, jeter un coup d'oeil sur le code réel serait probablement utile pour diagnostiquer ce qui se passe.

Answer 2

Votre suggestion pour utiliser 'ceci' devrait fonctionner. i.e. .:

var myNameSpace = { 
    myFirstFunction: function(){ 
     alert("Hello World!"); 
    }, 
    mySecondFunction: function(){ 
     this.myFirstFunction(); 
    } 
} 

Résultat:

myNameSpace.mySecondFunction() // "Hello World!". 

Answer 3

Dans certains cas, le mot-clé this devrait fonctionner correctement. Si vous appelez explicitement myNameSpace.mySecondFunction() alors this.myFirstFunction() s'exécutera comme prévu.

Si vous utilisez myNameSpace.mySecondFunction en tant que gestionnaire d'événements, ce n'est probablement pas le cas. Dans le cas d'un gestionnaire d'événements, vous devez vous référer à l'espace de noms que vous voulez utiliser. De nombreux frameworks JavaScript permettent de définir ce à quoi le mot clé this fait référence. Par exemple, dans MooTools vous pouvez faire myNameSpace.mySecondFunction.bind(myNameSpace) ce qui entraînera this à se référer à myNameSpace à . Si vous n'utilisez pas un cadre, vous pouvez rendre votre gestionnaire d'événements une fonction anonyme comme:

document.getElementById('myId').addEventListener('click', function(e) { 
    myNameSpace.mySecondFunction.call(myNameSpace); 
}); 

Pour plus d'informations sur la méthode d'appel, je me réfère à la MDC page for the call function ou vous pouvez utiliser apply qui se comporte de façon similaire à appeler, mais en passant un tableau d'arguments pour le second paramètre plutôt que d'avoir une approche similaire à celle de varargs pour les paramètres supplémentaires.

Toutes ces suggestions sont fondées sur la définition de votre espace de noms comme @Harnish suggested:

var myNameSpace = { 
    myFirstFunction: function(){ 
    alert("Hello World!"); 
    }, 
    mySecondFunction: function(){ 
    this.myFirstFunction(); 
    } 
} 

Pour plus d'informations sur la fonction JavaScript liant Je suggère fortement la lecture Justin's article on Function scope and binding in JavaScript

Answer 4

Si vous voulez qu'il soit plus court peut-être vous devriez considérer le motif suivant:

Javascript Design Pattern Suggestion

essentiellement pour votre exemple:

var myNameSpace = (function() 
{ 
    function _myFirstFunction(){ 
     alert("Hello World!"); 
    } 

    function _mySecondFunction(){ 
     _myFirstFunction(); 
    } 

    return { 
     MyFirstFunction : _myFirstFunction,  
     MySecondFunction : _mySecondFunction 
    }; 
})(); 

Je trouve que ce soit le plus propre modèle, en fournissant les variables javascript qui est par ailleurs à peu près « privé/public » impossible

Answer 5

Si vous joignons à l'événement:

question pourrait être possible si vous attachez la fonction de Namespace à l'événement, comme:

$(el).on("click", nameSpace.myFunc); 

.... 

nameSpace = { 

    myFunc: function(){ 
     this.anotherFunc(); 
    } 

} 

qui jetteront erreur.

Solution 1

Vous pouvez changer this.anotherFunc() avec nameSpace.anotherFunc()

Solution 2

Vous pouvez changer

$(el).on("click", nameSpace.myFunc); 
// to -----> 
$(el).on("click", function(){ nameSpace.myFunc(); } );