Pourquoi « ceci » en JavaScript diffère des autres langages POO

Le mot-clé this de JavaScript est souvent source de confusion, en particulier pour les développeurs issus de langages comme C#, Java ou Python, où self fait systématiquement référence à l'instance d'objet actuelle. Contrairement à ces langages, le this de JavaScript est dynamique, sa valeur étant déterminée par le contexte d'invocation de la fonction. Ce guide résume les différents scénarios impactant le comportement de this.

1. Portée mondiale :

• Mode non strict : this pointe vers l'objet global (window dans les navigateurs, global dans Node.js).

console.log(this); // window or global

• Mode strict : this est undefined.

"use strict";
console.log(this); // undefined

2. Fonctions intérieures :

• Fonctions régulières : En mode non strict, this fait référence à l'objet global ; en mode strict, c'est undefined.

function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)

3. Méthodes d'objet :

• Lorsqu'une fonction est appelée en tant que méthode objet, this fait référence à cet objet.

const myObj = {
  name: "JavaScript",
  greet() {
    console.log(this.name); // this refers to myObj
  }
};
myObj.greet(); // Output: JavaScript

4. Fonctions fléchées :

• Les fonctions fléchées n'ont pas leur propre this. Ils héritent this de leur portée lexicale (contexte environnant).

const myObj = {
  name: "JavaScript",
  arrowFunc: () => {
    console.log(this.name); // Inherits this from the global scope
  }
};
myObj.arrowFunc(); // undefined (in browsers, this is window)

5. Constructeurs :

• Au sein d'une fonction ou d'une classe constructeur, this fait référence à l'instance nouvellement créée.

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const person = new Person("Alice");
person.greet(); // Output: Hello, Alice

6. Liaison explicite (call, apply, bind) :

Les fonctions JavaScript sont des objets avec des méthodes (call, apply, bind) pour définir explicitement this.

• call et apply appellent la fonction avec une valeur this spécifiée. call utilise des arguments séparés par des virgules ; apply prend un tableau.

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

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

• bind renvoie une nouvelle fonction avec this lié ​​en permanence.

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

7. Auditeurs de l'événement :

• Fonctions régulières : this fait référence à l'élément déclenchant l'événement.

const btn = document.querySelector("button");
btn.addEventListener("click", function() {
  console.log(this); // The button element
});

• Fonctions fléchées : this hérite de la portée environnante, pas de l'élément.

btn.addEventListener("click", () => {
  console.log(this); // this depends on the arrow function's definition context
});

8. setTimeout / setInterval :

• Fonctions régulières : this par défaut, l'objet global.

setTimeout(function() {
  console.log(this); // window in browsers
}, 1000);

• Fonctions fléchées : this est héritée lexicalement.

setTimeout(() => {
  console.log(this); // Inherits this from surrounding context
}, 1000);

9. Cours :

• Dans une méthode de classe, this fait référence à l'instance de classe.

console.log(this); // window or global

10. Perte de contexte (méthode d'extraction) :

Attribuer une méthode à une variable ou la transmettre en tant que rappel peut entraîner this une perte de liaison.

"use strict";
console.log(this); // undefined

Solutions : Utilisez .bind(obj) ou une fonction flèche pour maintenir le contexte.

11. new Mot clé :

Utiliser new avec une fonction crée un nouvel objet et this fait référence à cet objet.

function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)

Tableau récapitulatif :

Contexte

Context	this Refers To
Global (non-strict)	Global object (window/global)
Global (strict)	undefined
Object Method	The object owning the method
Arrow Function	Lexical scope (surrounding context)
Constructor/Class	The instance being created
call, apply, bind	Explicitly defined value
Event Listener	The element triggering the event
setTimeout/setInterval	Global object (regular function), lexical scope (arrow function)
new Keyword	The newly created object

Fait référence à ête> Global (non strict) Objet global (fenêtre/global) Global (strict) non défini Méthode objet L'objet propriétaire de la méthode Fonction flèche Portée lexicale (contexte environnant) Constructeur/Classe L'instance en cours de création appeler, appliquer, lier Valeur explicitement définie Écouteur d'événements L'élément déclenchant l'événement setTimeout/setInterval Objet global (fonction régulière), portée lexicale (fonction flèche)

Mot clé

L'objet nouvellement créé thisComprendre ces scénarios est crucial pour écrire du code JavaScript correct et prévisible. N'oubliez pas d'utiliser des techniques telles que la liaison explicite lorsque cela est nécessaire pour éviter un comportement inattendu.

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!