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).

<code class="language-javascript">console.log(this); // window or global</code>

• Mode strict : this est undefined.

<code class="language-javascript">"use strict";
console.log(this); // undefined</code>

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.

<code class="language-javascript">function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)</code>

3. Méthodes d'objet :

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

<code class="language-javascript">const myObj = {
  name: "JavaScript",
  greet() {
    console.log(this.name); // this refers to myObj
  }
};
myObj.greet(); // Output: JavaScript</code>

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).

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

5. Constructeurs :

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

<code class="language-javascript">class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

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

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.

<code class="language-javascript">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</code>

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

<code class="language-javascript">const boundGreet = greet.bind(user);
boundGreet("Hello"); // Output: Hello, Alice</code>

7. Auditeurs de l'événement :

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

<code class="language-javascript">const btn = document.querySelector("button");
btn.addEventListener("click", function() {
  console.log(this); // The button element
});</code>

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

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

8. setTimeout / setInterval :

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

<code class="language-javascript">setTimeout(function() {
  console.log(this); // window in browsers
}, 1000);</code>

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

<code class="language-javascript">setTimeout(() => {
  console.log(this); // Inherits this from surrounding context
}, 1000);</code>

9. Cours :

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

<code class="language-javascript">console.log(this); // window or global</code>

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.

<code class="language-javascript">"use strict";
console.log(this); // undefined</code>

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.

<code class="language-javascript">function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)</code>

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!