Dans ce didacticiel, vous en apprendrez davantage sur ce mot-clé JavaScript à l'aide d'exemples.
En JavaScript, le thismot - clé fait référence à l'objet où il est appelé.
1. cette portée mondiale interne
Lorsqu'il thisest utilisé seul, thisfait référence à l'objet global ( windowobjet dans les navigateurs). Par exemple,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Ici, this.namec'est le même que window.name.
2. cette fonction intérieure
Quand thisest utilisé dans une fonction, thisfait référence à l'objet global ( windowobjet dans les navigateurs). Par exemple,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. cette fonction de constructeur interne
En JavaScript, les fonctions constructeur sont utilisées pour créer des objets. Lorsqu'une fonction est utilisée comme fonction constructeur, thisfait référence à l'objet à l'intérieur duquel elle est utilisée. Par exemple,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Production
Personne (nom: "Jack") Jack
Ici, thisfait référence à l'objet person1. C'est pourquoi, person1.namenous donne Jack.
Remarque : Quand thisest utilisé avec les classes ES6, il fait référence à l'objet dans lequel il est utilisé (similaire aux fonctions constructeur).
4. cette méthode d'objet intérieur
Quand thisest utilisé dans la méthode d'un objet, thisfait référence à l'objet dans lequel il se trouve. Par exemple,
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();
Production
(nom: "Jack", 25 ans, salue: ƒ) Jack
Dans l'exemple ci-dessus, thisfait référence à l' personobjet.
5. cette fonction intérieure intérieure
Lorsque vous accédez à l' thisintérieur d'une fonction interne (à l'intérieur d'une méthode), thisfait référence à l'objet global. Par exemple,
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();
Production
(nom: "Jack", 25 ans, saluer: ƒ) 25 Fenêtre (…) undefined
Ici, thisinside innerFunc()fait référence à l' objet global car il se innerFunc()trouve à l'intérieur d'une méthode.
Cependant, l' this.ageextérieur innerFunc()fait référence à l' personobjet.
6. cette fonction de flèche intérieure
À l'intérieur de la fonction de flèche, thisfait référence à la portée parent. Par exemple,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Les fonctions fléchées n'ont pas les leurs this. Lorsque vous utilisez thisune fonction de flèche, thisfait référence à son objet d'étendue parent. Par exemple,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Ici, this.nameà l'intérieur de la hi()fonction se réfère à l' greetobjet.
Vous pouvez également utiliser la fonction flèche pour résoudre le problème lié undefinedà l'utilisation d'une fonction à l'intérieur d'une méthode (comme indiqué dans l'exemple 5). Par exemple,
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();
Production
(nom: "Jack", âge: 25 ans, salutation: ƒ) 25 (nom: "Jack", âge: 25 ans, salutation: ƒ) 25
Ici, innerFunc()est défini à l'aide de la fonction flèche. Il prend thisde sa portée parent. Par conséquent, this.agedonne 25 .
Lorsque la fonction de flèche est utilisée avec this, elle fait référence à la portée externe.
7. cette fonction intérieure avec le mode strict
Quand thisest utilisé dans une fonction en mode strict, thisest undefined. Par exemple,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Remarque : lorsque vous utilisez thisune fonction en mode strict, vous pouvez utiliser l'appel de fonction JavaScript ().
Par exemple,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Lorsque vous passez thisavec la call()fonction, greet()est traitée comme la méthode de l' thisobjet (objet global dans ce cas).
