Invocazione della funzione JavaScript
Il codice all'interno di un JavaScript functionverrà eseguito quando "qualcosa" lo invoca.
Invocare una funzione JavaScript
Il codice all'interno di una funzione non viene eseguito quando la funzione è definita .
Il codice all'interno di una funzione viene eseguito quando la funzione viene richiamata .
È comune usare il termine " chiamare una funzione " invece di " richiamare una funzione ".
È anche comune dire "richiama una funzione", "avvia una funzione" o "esegui una funzione".
In questo tutorial useremo invoke , perché una funzione JavaScript può essere invocata senza essere chiamata.
Invocare una funzione come una funzione
Esempio
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); //
Will return 20
La funzione sopra non appartiene a nessun oggetto. Ma in JavaScript c'è sempre un oggetto globale predefinito.
In HTML l'oggetto globale predefinito è la pagina HTML stessa, quindi la funzione sopra "appartiene" alla pagina HTML.
In un browser l'oggetto della pagina è la finestra del browser. La funzione sopra diventa automaticamente una funzione finestra.
myFunction() e window.myFunction() sono la stessa funzione:
Esempio
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // Will also return 20
Questo è un modo comune per invocare una funzione JavaScript, ma non è una pratica molto buona.
Le variabili globali, i metodi o le funzioni possono creare facilmente conflitti di nome e bug nell'oggetto globale.
La parola chiave questa
In JavaScript, la cosa chiamata this, è l'oggetto che "possiede" il codice corrente.
Il valore di this, quando utilizzato in una funzione, è l'oggetto che "proprietario" della funzione.
Nota che thisnon è una variabile. È una parola chiave. Non è possibile modificare il valore di this.
Suggerimento: leggi di più sulla thisparola chiave in JS this Keyword .
L'oggetto globale
Quando una funzione viene chiamata senza un 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 valore di this:
Esempio
let x = myFunction();
// x will be the window object
function myFunction() {
return this;
}
Invocare una funzione come funzione globale, fa sì che il valore di questo sia l'oggetto globale.
L'utilizzo dell'oggetto window come variabile può facilmente causare il crash del programma.
Invocare una funzione come metodo
In JavaScript puoi definire funzioni come metodi oggetto.
L'esempio seguente crea un oggetto ( myObject ), con due proprietà ( firstName e lastName ) e un metodo ( fullName ):
Esempio
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"
Il metodo fullName è una funzione. La funzione appartiene all'oggetto. myObject è il proprietario della funzione.
La cosa chiamata this, è l'oggetto che "possiede" il codice JavaScript. In questo caso il valore di this
è myObject .
Provalo! Modificare il metodo fullName per restituire il valore di this:
Esempio
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
// This will return [object Object] (the owner object)
myObject.fullName();
Invocare una funzione come metodo oggetto, fa sì che il valore di this
sia l'oggetto stesso.
Invocare una funzione con un costruttore di funzioni
Se una chiamata di funzione è preceduta dalla newparola chiave, è una chiamata del costruttore.
Sembra che tu crei una nuova funzione, ma poiché le funzioni JavaScript sono oggetti, in realtà crei un nuovo oggetto:
Esempio
// This is a function constructor:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
const myObj = new myFunction("John", "Doe");
// This will return "John"
myObj.firstName;
Una chiamata del costruttore crea un nuovo oggetto. Il nuovo oggetto eredita le proprietà ei metodi dal suo costruttore.
La thisparola chiave nel costruttore non ha un valore.
Il valore di thissarà il nuovo oggetto creato quando viene richiamata la funzione.