Comprendre ce mot-clé en JavaScript

Le mot clé this en JavaScript

Le mot-clé this est l'une des fonctionnalités les plus puissantes mais mal comprises de JavaScript. Il fait référence au contexte dans lequel une fonction est exécutée et peut varier selon la manière dont la fonction est appelée.

1. Qu'est-ce que c'est ?

La valeur de ceci est déterminée par le contexte d'exécution : l'environnement dans lequel la fonction s'exécute. Il fait généralement référence à un objet, mais sa valeur exacte dépend de la manière et de l'endroit où la fonction est invoquée.

2. Comment ça marche

A. Contexte mondial

Dans le contexte d'exécution globale (en dehors de toute fonction), cela fait référence à l'objet global :

• Dans les navigateurs : fenêtre
• Dans Node.js : global

Exemple :

console.log(this); 
// In a browser: window
// In Node.js: global

B. À l'intérieur d'une fonction régulière

Lorsqu'une fonction est invoquée dans la portée globale, la valeur par défaut est l'objet global (mode non strict). En mode strict, ceci n'est pas défini.

Exemple :

function showThis() {
  console.log(this);
}

showThis(); 
// Non-strict mode: window (global object)
// Strict mode: undefined

C. À l'intérieur d'une méthode objet

Lorsqu'une fonction est appelée comme méthode d'un objet, cela fait référence à l'objet lui-même.

Exemple :

const obj = {
  name: "JavaScript",
  getName: function () {
    console.log(this.name);
  },
};

obj.getName(); // Output: JavaScript

D. À l'intérieur d'une fonction constructeur

Dans une fonction constructeur, ceci fait référence à l'objet nouvellement créé.

Exemple :

function Person(name) {
  this.name = name;
}

const john = new Person("John");
console.log(john.name); // Output: John

E. À l'intérieur d'une fonction fléchée

Les fonctions fléchées n'ont pas leur propre ceci. Au lieu de cela, ils héritent de cela de leur portée lexicale environnante.

Exemple :

const obj = {
  name: "JavaScript",
  getName: function () {
    const arrowFunc = () => console.log(this.name);
    arrowFunc();
  },
};

obj.getName(); // Output: JavaScript

3. Relier ceci

Vous pouvez définir explicitement la valeur de ceci en utilisant call, apply ou bind.

A. Utiliser l'appel

Appelle une fonction avec une valeur this spécifique et des arguments fournis individuellement.

Exemple :

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Alice" };
greet.call(user, "Hello"); // Output: Hello, Alice

B. Utiliser Appliquer

Fonctionne comme call mais prend les arguments sous forme de tableau.

Exemple :

greet.apply(user, ["Hi"]); // Output: Hi, Alice

C. Utiliser bind

Renvoie une nouvelle fonction avec celle-ci définie en permanence sur l'objet spécifié.

Exemple :

const boundGreet = greet.bind(user);
boundGreet("Hey"); // Output: Hey, Alice

4. Cas d'utilisation courants de ceci

A. Gestionnaires d'événements

Dans un écouteur d'événement, cela fait référence à l'élément qui a déclenché l'événement.

Exemple :

console.log(this); 
// In a browser: window
// In Node.js: global

B. Méthodes d'objet dynamique

cela permet aux objets de partager des méthodes de manière dynamique.

Exemple :

function showThis() {
  console.log(this);
}

showThis(); 
// Non-strict mode: window (global object)
// Strict mode: undefined

C. Méthodes de cours

Dans une classe, cela fait référence à l'instance actuelle.

Exemple :

const obj = {
  name: "JavaScript",
  getName: function () {
    console.log(this.name);
  },
};

obj.getName(); // Output: JavaScript

5. Pièges courants et meilleures pratiques

A. Perdre le contexte

Lorsqu'une méthode est affectée à une variable, celle-ci peut perdre son contexte d'origine.

Exemple :

function Person(name) {
  this.name = name;
}

const john = new Person("John");
console.log(john.name); // Output: John

Solution : Utilisez les fonctions de liaison ou de flèche.

const obj = {
  name: "JavaScript",
  getName: function () {
    const arrowFunc = () => console.log(this.name);
    arrowFunc();
  },
};

obj.getName(); // Output: JavaScript

B. Dans les fonctions de rappel

cela à l'intérieur d'un rappel perd souvent son contexte.

Exemple :

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Alice" };
greet.call(user, "Hello"); // Output: Hello, Alice

Solution : Utiliser les fonctions fléchées.

greet.apply(user, ["Hi"]); // Output: Hi, Alice

6. Résumé

• cela fait référence au contexte d'exécution d'une fonction.
• Dans les fonctions fléchées, ceci est hérité de la portée lexicale.
• Utilisez call, apply ou bind pour définir explicitement la valeur de this.
• Comprenez comment cela se comporte dans différents contextes pour éviter les bugs dans votre code.

Maîtriser cela permet de mieux comprendre le comportement de JavaScript et vous permet d'écrire du code plus propre et plus prévisible.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!