In questo tutorial, imparerai a conoscere questa parola chiave di JavaScript con l'aiuto di esempi.
In JavaScript, la thisparola chiave si riferisce all'oggetto in cui viene chiamata.
1. questo Inside Global Scope
Quando thisviene utilizzato da solo, si thisriferisce all'oggetto globale ( windowoggetto nei browser). Per esempio,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Qui this.nameè lo stesso di window.name.
2. questa funzione interna
Quando thisviene utilizzato in una funzione, si thisriferisce all'oggetto globale ( windowoggetto nei browser). Per esempio,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. questa funzione Inside Constructor
In JavaScript, le funzioni del costruttore vengono utilizzate per creare oggetti. Quando una funzione viene utilizzata come funzione di costruzione, si thisriferisce all'oggetto all'interno del quale viene utilizzata. Per esempio,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Produzione
Persona (nome: "Jack") Jack
Qui, si thisriferisce all'oggetto person1. Ecco perché, person1.nameci dà Jack.
Nota : quando thisviene utilizzato con le classi ES6, si riferisce all'oggetto all'interno del quale viene utilizzato (simile alle funzioni del costruttore).
4. questo metodo Inside Object
Quando thisviene utilizzato all'interno del metodo di un oggetto, si thisriferisce all'oggetto in cui si trova. Per esempio,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.name); ) ) person.greet();
Produzione
(nome: "Jack", età: 25 anni, saluto: ƒ) Jack
Nell'esempio sopra, si thisriferisce personall'oggetto.
5. questa funzione interna interna
Quando si accede a thisuna funzione interna (all'interno di un metodo), si thisfa riferimento all'oggetto globale. Per esempio,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); // (name: "Jack", age… ) console.log(this.age); // 25 // inner function function innerFunc() ( // this refers to the global object console.log(this); // Window (… ) console.log(this.age); // undefined ) innerFunc(); ) ) person.greet();
Produzione
(nome: "Jack", età: 25 anni, saluto: ƒ) 25 Finestra (…) indefinita
Qui, thisinside si innerFunc()riferisce all'oggetto globale perché innerFunc()è all'interno di un metodo.
Tuttavia, this.ageesterno si innerFunc()riferisce personall'oggetto.
6. questa funzione freccia interna
All'interno della funzione freccia, thisfa riferimento all'ambito padre. Per esempio,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Le funzioni delle frecce non hanno le proprie this. Quando si utilizza thisall'interno di una funzione freccia, thisfa riferimento al suo oggetto ambito padre. Per esempio,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Qui, this.nameall'interno della hi()funzione si fa riferimento greetall'oggetto.
È inoltre possibile utilizzare la funzione freccia per risolvere il problema di avere undefinedquando si utilizza una funzione all'interno di un metodo (come mostrato nell'Esempio 5). Per esempio,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.age); // inner function let innerFunc = () => ( // this refers to the global object console.log(this); console.log(this.age); ) innerFunc(); ) ) person.greet();
Produzione
(nome: "Jack", età: 25, saluto: ƒ) 25 (nome: "Jack", età: 25, saluto: ƒ) 25
Qui, innerFunc()è definito utilizzando la funzione freccia. Prende thisdal suo ambito padre. Quindi, this.agedà 25 .
Quando la funzione freccia viene utilizzata con this, si riferisce all'ambito esterno.
7. questa funzione interna con modalità rigorosa
Quando thisviene utilizzato in una funzione con modalità rigorosa, thisè undefined. Per esempio,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Nota : quando si utilizza thisall'interno di una funzione con modalità rigorosa, è possibile utilizzare la funzione JavaScript call ().
Per esempio,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Quando si passa thiscon la call()funzione, greet()viene considerato come il metodo thisdell'oggetto (oggetto globale in questo caso).
