Jak wywołać inną funkcję w tej samej przestrzeni nazw javascript?

Question

Lubię organizować mój javascript w stylu przestrzeni nazw jak poniżej. Co chcę wiedzieć: czy istnieje inny (krótszy?) Sposób wywoływania myFirstFunction() z mySecondFunction()? Próbowałem this.myFirstFunction() i to nie działa, więc może jest tu jakaś tajemnicza sztuczka, której nie znam.

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

Dzięki za pomoc, jak zwykle, ludzie SO! :)

Answer 1

Jak napisano w przykładowym kodzie, this.myFirstFunction() będzie działać. Twój kod najprawdopodobniej jest uproszczony, aby zilustrować Twój problem, więc prawdopodobnie zobaczysz, jaki kod jest prawdziwy, aby stwierdzić, dlaczego nie działa on z this.

Jedną z możliwych przyczyn niepowodzenia jest to, że kod, pod którym dzwonisz pod numer this.myFirstFunction(), znajduje się w zamknięciu. Jeśli tak, to this byłoby odwołaniem do funkcji zamykania, a nie do przestrzeni nazw i dlatego też nie powiodłoby się. Zobacz here, aby zobaczyć przykładowy kod oparty na kodzie, aby zobaczyć, co mam na myśli. Ponownie, przyjrzenie się faktycznemu kodowi będzie prawdopodobnie pomocne w zdiagnozowaniu tego, co się dzieje.

Answer 2

Twoja sugestia, aby użyć "to" powinna zadziałać. tj .:

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

Wynik:

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

Answer 3

W niektórych przypadkach słowo kluczowe this powinno działać poprawnie. Jeśli jawnie wywołasz myNameSpace.mySecondFunction(), wtedy this.myFirstFunction() zostanie wykonane zgodnie z przeznaczeniem.

Jeśli używasz myNameSpace.mySecondFunction jako funkcji obsługi zdarzeń, prawdopodobnie nie będzie. W przypadku obsługi zdarzeń potrzebujesz w jakiś sposób odwołać się do przestrzeni nazw, której chcesz użyć. Wiele frameworków JavaScript umożliwia zdefiniowanie słowa kluczowego this. Na przykład w MooTools można wykonać myNameSpace.mySecondFunction.bind(myNameSpace), co spowoduje, że this odniesie się do myNameSpace wewnątrz mySecondFunction. Jeśli nie używasz ramy można dokonać obsługi zdarzeń anonimowej funkcji takich jak:

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

Aby uzyskać więcej informacji na temat sposobu połączenia chciałbym odnosić się do MDC page for the call function czy można wykorzystać apply który zachowuje się podobnie jak zadzwonić ale przechodząc tablica argumentów dla drugiego parametru, zamiast mieć podejście podobne do varargs dla dodatkowych parametrów.

Wszystkie te sugestie są orzekane na definiowanie nazw jako @Harnish suggested:

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

Aby uzyskać więcej informacji na temat funkcji JavaScript wiążące Goraco sugeruję czytanie Justin's article on Function scope and binding in JavaScript

Answer 4

Jeśli chcesz to może być krótszy należy rozważyć następujący wzór:

Javascript Design Pattern Suggestion

zasadzie dla przykładu:

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

    function _mySecondFunction(){ 
     _myFirstFunction(); 
    } 

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

uważam, że jest to najczystszy wzór, również zapewnienie „prywatne/publiczne” zmiennych w JavaScript, który jest inaczej prawie niemożliwe

Answer 5

Jeśli dołączenie do wydarzenia:

możliwy problem może być, jeśli dołączenie funkcji przestrzeni nazw do imprezy, jak:

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

.... 

nameSpace = { 

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

} 

że rzuci błąd.

Rozwiązanie 1

można zmienić this.anotherFunc() z nameSpace.anotherFunc()

Rozwiązanie 2

Można zmienić

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