Gli ultimi tutorial di sviluppo web
 

JavaScript Invocazione funzione


funzioni JavaScript possono essere invocate in 4 modi diversi.

Ogni metodo differisce in quanto this viene inizializzato.


Il this Chiave

In JavaScript, la cosa chiamata this , è l'oggetto che "possiede" il codice corrente.

Il valore di this , quando usato in una funzione, è l'oggetto che "possiede" la funzione.

Si noti che this non è una variabile. È una parola chiave. Non è possibile modificare il valore di this .


Invocare una funzione JavaScript

Hai già imparato che il codice all'interno di una funzione JavaScript verrà eseguita quando "qualcosa" invoca.

Il codice in una funzione non viene eseguita quando si definisce la funzione. Viene eseguito quando viene richiamata la funzione.

Alcune persone usano il termine "chiamare una funzione" invece di "richiamare una funzione".

E 'anche abbastanza comune per dire "invocano una funzione", "avviare una funzione", o "eseguire una funzione".

In questo tutorial, useremo invoke, perché una funzione JavaScript può essere invocato senza essere chiamati.


Invocare una funzione come una funzione

Esempio

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) will return 20
Prova tu stesso "

La funzione di cui sopra non appartiene a qualsiasi oggetto. Ma in JavaScript c'è sempre un oggetto globale di default.

In HTML l'oggetto globale di default è la pagina HTML stessa, per cui la funzione di cui sopra "appartiene" alla pagina HTML.

In un browser l'oggetto pagina è la finestra del browser. La funzione di cui sopra diventa automaticamente una funzione finestra.

myFunction() e window.myFunction() è la stessa funzione:

Esempio

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) will also return 20
Prova tu stesso "

Questo è un modo comune per richiamare una funzione JavaScript, ma non è una pratica molto buona.
Le variabili globali, i metodi o le funzioni possono facilmente creare conflitti di nomi e gli insetti in oggetto globale.


L'oggetto globale

Quando una funzione viene chiamata senza oggetto proprietario, il valore di this diventa l'oggetto globale.

In un browser Web l'oggetto globale è la finestra del browser.

Questo esempio restituisce l'oggetto finestra come il valore di this :

Esempio

function myFunction() {
    return this;
}
myFunction();                // Will return the window object
Prova tu stesso "

Richiamando una funzione come una funzione globale, provoca il valore di this sia l'oggetto globale.
Utilizzando l'oggetto finestra come una variabile può facilmente causare il crash del programma.


Invocare una funzione come metodo

In JavaScript è possibile definire la funzione come metodi dell'oggetto.

L'esempio seguente crea un oggetto ( myObject ), con due proprietà ( firstName e lastName ), e un metodo ( fullName ):

Esempio

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // Will return "John Doe"
Prova tu stesso "

Il fullName metodo è una funzione. La funzione appartiene all'oggetto. myObject è il proprietario della funzione.

La cosa che si chiama this , è l'oggetto che "possiede" il codice JavaScript. In questo caso il valore di this è myObject .

Provalo! Cambiare il fullName metodo per restituire il valore di this :

Esempio

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // Will return [object Object] (the owner object)
Prova tu stesso "

Richiamando una funzione come un metodo di oggetto, determina il valore di this sia l'oggetto stesso.


Invocare una funzione con un costruttore funzione

Se una chiamata funzione è preceduta con la new parola chiave, è una invocazione costruttore.

Sembra che si crea una nuova funzione, ma dal momento che le funzioni di JavaScript sono oggetti che in realtà crea un nuovo oggetto:

Esempio

// 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"
Prova tu stesso "

Una invocazione di costruzione crea un nuovo oggetto. Il nuovo oggetto eredita le proprietà ei metodi dal suo costruttore.

Il this parola chiave nel costruttore non ha un valore.
Il valore di this sarà il nuovo oggetto creato quando viene richiamata la funzione.


Invocare una funzione con un metodo della funzione

In JavaScript, le funzioni sono oggetti. funzioni JavaScript hanno proprietà e metodi.

call() e apply() sono predefiniti metodi funzione JavaScript. Entrambi i metodi possono essere utilizzati per richiamare una funzione, ed entrambi i metodi devono avere l'oggetto proprietario come primo parametro.

Esempio

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // Will return 20
Prova tu stesso "

Esempio

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // Will also return 20
Prova tu stesso "

Entrambi i metodi hanno un oggetto proprietario come primo argomento. L'unica differenza è che call() prende gli argomenti della funzione separatamente e apply() prende gli argomenti della funzione in un array.

In modalità rigorosa JavaScript, il primo argomento diventa il valore di this nella funzione invocata, anche se l'argomento non è un oggetto.

In modalità "non-strict", se il valore del primo argomento è null o undefined, viene sostituito con l'oggetto globale.

Con call() o apply() è possibile impostare il valore di this , e di richiamare una funzione come un nuovo metodo di un oggetto esistente.