Questo "Parola chiave in JavaScript - Come usare" questo "Parola chiave? - Esempi

Sommario:

Anonim

Che cos'è "questa" parola chiave in JavaScript?

Come sappiamo che gli oggetti sono i mattoni di base in JavaScript, esiste un oggetto speciale chiamato anche "this" e il valore di "this" può essere visto in ogni riga dell'esecuzione di JavaScript che viene di nuovo decisa in base a come è il codice in esecuzione. In questo argomento, impareremo a conoscere questa "parola chiave" in JavaScript.

Importanza di "questa" parola chiave in JavaScript

  • L'oggetto "this" in JavaScript ha molti ruoli e usi importanti. Viene utilizzato principalmente per indicare un'istanza di un oggetto dal proprio metodo o costruttore. Oltre al puntamento, 'this' può anche essere usato per tenere traccia dell'esecuzione del contesto che si basa su dove viene chiamata la funzione.
  • La prossima cosa sulla funzione "questo" in JavaScript è che il collegamento al contesto di esecuzione può cambiare. Infine, il collegamento al contesto di esecuzione può essere stabilito anche quando è riferito da una funzione di callback, anche se la funzione è definita all'interno dell'oggetto costruttore.

Perché usare la parola chiave "this" in JavaScript?

  • In JavaScript, la parola chiave "questa" viene utilizzata in molti contesti per sfruttare al meglio i contesti. Fondamentalmente, la parola chiave "this" viene utilizzata per fare riferimento a qualche oggetto o funzione in JavaScript. Come per la stessa parola (questa), possiamo capire che si riferisce a qualcosa. Per capire meglio "questo" in modo pratico, possiamo prendere in considerazione un esempio in cui Mr. X ha giocato a Cricket e ha vinto la partita.
  • Quindi, qui al posto di usare di nuovo Mr. X, abbiamo usato "lui" che si riferisce solo a Mr. X. Ci sta aiutando a non menzionare più e più volte la stessa cosa. Allo stesso modo, anche in JavaScript, possiamo usare la funzione o l'oggetto "this" per fare riferimento a qualche altra funzione o oggetto con il valore invocato in quella funzione o oggetto. Di solito, 'this' viene utilizzato all'interno di una funzione o di un metodo, ma può essere utilizzato anche al di fuori della funzione (nell'ambito globale).

Come usare la parola chiave "this"?

  • Poiché sappiamo che JavaScript è un linguaggio di scripting, quindi non è necessaria una compilazione dei codici, viene eseguito in fase di esecuzione. Può essere eseguito direttamente dall'interprete, riga per riga. E l'ambiente o l'ambito in cui vengono eseguiti i codici JavaScript è chiamato "contesto di esecuzione".
  • Il runtime JavaScript mantiene uno stack di contesti di esecuzione e mantiene in cima lo stack corrente. L'oggetto a cui fa riferimento "questo" viene modificato ogni volta che viene modificato il contesto di esecuzione.
  • Semplicemente, possiamo presumere che quando una funzione viene creata contemporaneamente viene anche creata una parola chiave 'this' (dietro la scena) che si collega all'oggetto su cui opera la funzione. La parola chiave "this" funziona diversamente in JavaScript da altri linguaggi di programmazione.

Ha vari valori a seconda di dove lo usiamo, ad esempio:

  • 'this' si riferisce all'oggetto proprietario in un metodo.
  • 'questo' si riferisce all'oggetto globale nella sola situazione.
  • 'this' si riferisce anche agli oggetti globali in una semplice funzione.
  • 'this' si riferisce a un elemento in un evento che riceve l'evento.
  • 'this' non è definito in una funzione di modalità rigorosa.

1. Usato con un campo

Esempio : sotto, 'this' si riferisce a un oggetto chiamato persona. E la persona è il proprietario del metodo fullName.

var employee = (
firstName: “Raju”,
lastName: “Chaudhury”,
id: 123
fullName: function() (
return this.firstName + “ ” + this.lastName;
)
)

Un breve esempio per un campo modulo:


check to alert this object name

Inserisci il nome e controlla l'opzione radio qui sotto per avvisare la tua voce

Selezionare questa opzione per avvisare l'inserimento del campo di testo

Notare il gestore eventi onsubmit mentre si apre il modulo per vedere l'azione intrapresa quando si fa clic sul pulsante di invio

2. Usato per invocare un costruttore

Di solito, quando utilizziamo la parola chiave "new" per creare un'istanza per un oggetto funzione, utilizziamo la funzione come costruttore.

Nell'esempio seguente, dichiariamo una funzione Bike e la invochiamo come costruttore:

function Bike(name)(
this.name = name;
)
Bike.prototype.getName = function()(
return this.name;
)
var bike = new Bike('Pulsar');
console.log(bike.getName());

Nell'esempio sopra, la nuova bici ("Pulsar") è un costruttore della funzione bici. Qui, JavaScript crea un nuovo oggetto e inserisce la parola chiave "this" nell'oggetto appena creato. Quindi, ora possiamo invocare Bike () come funzione o come costruttore. Qui, nel caso in cui rimuoviamo la parola chiave "new", mostreremo alcuni errori come di seguito:

var bajaj = Bike('Bajaj');
console.log(bajaj.name);

/ * Verrà visualizzato come TypeError: impossibile leggere la proprietà 'name' di undefined * /

Questo perché, questo nella funzione Bike () viene messo nell'oggetto globale, bajaj.name risulta indefinito.

Per rendere sempre invocata la funzione Bike () tramite il costruttore, controlliamo all'inizio della funzione Bike () come di seguito:

function Bike(name)(
if( ! (this instanceof Bike)(
throw Error(“We should use new operator to call a function”);
)
this.name = name;
)

Esiste una metaproperty nota come "new.target" che consente di rilevare se una funzione viene invocata come semplice invocazione o costruttore.

Qui, possiamo modificare la funzione Bike () che utilizza la metaproperty di new.target come di seguito

function Bike(name)(
if( ! new.target)(
throw Error(“We should use new operator to call a function”);
)
this.name = name;
)

3. Utilizzato per restituire l'istanza di classe corrente

Un'espressione di classe è anche un modo per definire una classe in JavaScript. Può anche essere nominato o senza nome. Il nome è il locale del suo corpo di classe e t può essere recuperato dalle proprietà della classe.

/ * esempio per un'espressione di classe senza nome * /

let Mobile = class (
constructor(cost, weight)(
this.cost = cost;
this.weight = weight;
)
);
console.log(Mobile.name); //Output: Mobile

/ * esempio per un'espressione di classe denominata * /

let Mobile = class Mobile2(
constructor(cost, weight)(
this.cost = cost;
this.weight = weight;
)
);
console.log(Mobile.name);

Uscita: mobile2

4. Usato come parametro del metodo

Quando chiamiamo un metodo di un oggetto, JavaScript inserisce 'this' nell'oggetto che possiede il metodo.

Esempio:

var Bike = (
name: 'Pulsar',
getName: function()(
return this.name;
)
)
console.log(bike.getName()); /*Pulsar*/

Qui, questo metodo getName () interno fa riferimento a un oggetto bike.

Conclusione

La parola chiave "this" in JavaScript è un potente strumento che di solito aiuta gli sviluppatori a riferire le proprietà in contesti specifici, ma a volte potrebbe essere anche piuttosto complicato quando si applicano attraverso i vari livelli di ambito. Il valore di 'this' può anche essere impostato esplicitamente con call (), bind () e apply (). Di solito, il valore di 'this' è determinato dal contesto di esecuzione della funzione. Le funzioni delle frecce di solito non associano 'questo' e invece di 'questo' è legato lessicamente.

Articoli consigliati

Questa è una guida per "questa" parola chiave in JavaScript. Qui discutiamo dell'importanza e di come usare la parola chiave "this" in JavaScript insieme all'esempio. Puoi anche consultare il seguente articolo.

  1. Incapsulamento in JavaScript
  2. Inserimento Ordina in JavaScript
  3. Palindrome in JavaScript
  4. Compilatori JavaScript
  5. questa parola chiave in java | Esempi di questa parola chiave
  6. Regole di istanza di Java con esempio