funkcje JavaScript mogą być powoływane w 4 różnych sposobów.
Każda metoda różni się, w jaki sposób this jest inicjowany.
this słowo
W JavaScript, rzecz o nazwie this jest obiekt, który "posiada" aktualny kod.
Wartość this , stosowana w funkcji, jest obiektem, który "posiada" funkcję.
Należy zauważyć, że this nie jest zmienny. Jest to kluczowe. Nie można zmienić wartość this .
Wywołanie funkcji JavaScript
Już dowiedziałem się, że kod wewnątrz funkcji JavaScript zostanie wykonane, gdy "coś" przywołuje go.
Kod w funkcji nie jest wykonywany, gdy funkcja jest zdefiniowana. Jest on wykonywany po wywołaniu funkcji.
Niektórzy ludzie używają terminu "wywołania funkcji" zamiast "wywołania funkcji".
Jest również dość powszechne, aby powiedzieć "wzywać funkcji", "uruchomić funkcję" lub "wykonać funkcję".
W tym tutorialu użyjemy Invoke, ponieważ funkcja JavaScript może być wywołany bez wezwania.
Wywoływanie funkcji jako funkcji
Przykład
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // myFunction(10, 2) will return 20
Spróbuj sam " Funkcja powyżej nie należy do żadnego obiektu. Ale w JavaScript zawsze jest domyślnym obiektem globalnym.
W HTML domyślny globalny obiekt jest strona HTML sama, więc funkcja wyżej "należy" do strony HTML.
W przeglądarce celem strony jest okno przeglądarki. Funkcja powyżej automatycznie staje się funkcja okna.
myFunction() i window.myFunction() to te same funkcje:
Przykład
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // window.myFunction(10, 2) will also return 20
Spróbuj sam " Jest to powszechny sposób wywoływania funkcji JavaScript, ale nie jest to bardzo dobra praktyka.
Zmienne globalne, metody lub funkcje mogą łatwo tworzyć konfliktów nazw i błędy w globalnej obiektu.
Globalnego obiektu
Gdy funkcja jest wywołana bez obiektu właściciela, wartość this staje się obiektem globalnym.
W przeglądarce internetowej globalny obiekt jest okno przeglądarki.
W tym przykładzie zwraca obiekt okna jako wartość this :
Przykład
function myFunction() {
return this;
}
myFunction(); // Will return the window object
Spróbuj sam " Wywoływanie funkcji jako funkcji globalnej powoduje, że wartość this będzie globalny obiektu.
Korzystanie z obiektu okna jako zmienną można łatwo rozbić swój program.
Wywoływanie funkcji jako metoda
W JavaScript można funkcję jako metod obiektowych zdefiniowania.
Poniższy przykład tworzy obiekt ( myObject ), z dwóch właściwości ( firstName i lastName ) i metoda ( fullName ):
Przykład
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"
Spróbuj sam " fullName metoda jest funkcją. Funkcja należy do obiektu. myObject jest właścicielem funkcji.
Rzecz nazywa this jest obiekt, który "posiada" kod JavaScript. W tym przypadku wartość this jest myObject .
Przetestuj to! Zmień fullName metody zwracają wartość this :
Przykład
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); // Will return [object Object] (the owner object)
Spróbuj sam " Wywoływanie funkcji jako metoda obiektu, powoduje, że wartość this będzie sam obiekt.
Wywoływanie funkcji z konstruktora Function
Jeśli wywołanie funkcji jest poprzedzone new hasła, to wywołanie konstruktora.
Wygląda na to, utworzyć nową funkcję, ale od funkcji JavaScript są obiektami rzeczywiście stworzyć nowy obiekt:
Przykład
// This is a function constructor:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;
// Will return "John"
Spróbuj sam " Konstruktor wywołanie tworzy nowy obiekt. Nowy obiekt dziedziczy właściwości i metody z jego konstruktora.
this słowo kluczowe w konstruktorze nie posiada wartości.
Wartość this będzie nowy obiekt utworzony, gdy funkcja jest wywoływana.
Wywoływanie funkcji z metoda funkcji
W JavaScript, funkcje są obiektami. funkcji JavaScript mają właściwości i metody.
call() i apply() to predefiniowane metody funkcji JavaScript. Obie metody mogą być stosowane do wywoływania funkcji i obie metody muszą przedmiotu właściciela jako pierwszy parametr.
Przykład
function myFunction(a, b) {
return a * b;
}
myObject = myFunction.call(myObject, 10, 2); // Will return 20
Spróbuj sam " Przykład
function myFunction(a, b) {
return a * b;
}
myArray = [10, 2];
myObject =
myFunction.apply(myObject, myArray); // Will also return 20
Spróbuj sam " Obie metody obiektu właściciela jako pierwszy argument. Jedyną różnicą jest to, że call() przyjmuje argumentów funkcji oddzielnie i apply() przyjmuje argumentów funkcji w tablicy.
W trybie ścisłym JavaScript, pierwszym argumentem staje wartość this w funkcji wywołany, nawet jeśli nie jest to obiekt.
W trybie "non-ścisłym", jeżeli wartość pierwszego argumentu jest zerowy lub nieokreślone, otrzymuje z globalnego obiektu.
Z call() lub apply() można ustawić wartość this i wywołać funkcję jako nowej metody istniejącego obiektu.