Comprendre 'ce' dans JavaScript et son comportement dans divers scénarios

jamais été perplexe par le mot-clé this de JavaScript? Tu n'es pas seul! Prendre ses nuances, c'est comme apprendre une nouvelle compétence - il faut de la pratique, mais une fois que vous l'obtenez, tout clique.

Ce billet de blog démystifie this, explorant son comportement dans différents contextes avec des exemples illustratifs. Commençons!

Qu'est-ce que this?

Dans JavaScript, this est un mot clé représentant l'objet à laquelle appartient une fonction. Il permet des fonctions dynamiques réutilisables en déterminant sa valeur au moment de l'exécution. Le contexte de l'appel de fonction dicte la valeur de this, ce qui le rend à la fois puissant et parfois déroutant.

Points clés:

• this est un mot-clé, pas une variable.
• Vous ne pouvez pas attribuer directement une valeur à this.
• Sa valeur est déterminée dynamiquement au moment de l'exécution.

Analogie du monde réel:

Imaginez this en tant que guide touristique du musée. Dans le musée d'art, le guide représente le musée d'art; Dans le musée d'histoire, ils représentent le musée d'histoire. De même, this s'adapte à son contexte.

this dans différents scénarios:

1. Contexte global (liaison par défaut):

Fonctions extérieures, this fait référence à l'objet global. Cela varie en fonction de l'environnement:

• BROWSER (sans mode strict): this est l'objet window.
• node.js (sans mode strict): this est {} (un objet vide) car les modules Node.js ont leur propre portée.

Exemple:

<code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

Mode strict: En mode strict, this reste window dans les navigateurs et undefined dans node.js.

Exemple:

<code class="language-javascript">'use strict';
console.log(this); // Browser: window object; Node.js: undefined</code>

2. Inside Fonctions régulières:

dans les fonctions régulières, la valeur de this dépend de la façon dont la fonction est appelée.

• sans mode strict: dans les navigateurs, this est l'objet window; Dans Node.js, c'est l'objet global.
• avec le mode strict: this est undefined.

Exemple:

<code class="language-javascript">function showThis() {
  console.log(this);
}
showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

3. Méthodes d'objet à l'intérieur (liaison implicite):

Lorsqu'une fonction est la méthode d'un objet, this pointe vers cet objet.

Exemple:

<code class="language-javascript">const book = {
  title: 'JavaScript Mastery',
  showTitle: function() {
    console.log(this.title);
  }
};
book.showTitle(); // Output: JavaScript Mastery</code>

4. Fonctions de flèche:

Les fonctions Arrow n'ont pas leur propre this. Ils l'héritent de leur portée lexicale environnante.

Exemple:

<code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

5. Fonctions du constructeur (nouvelle liaison):

avec le mot-clé new, this fait référence à l'objet nouvellement créé.

Exemple:

<code class="language-javascript">'use strict';
console.log(this); // Browser: window object; Node.js: undefined</code>

6. Classes:

dans les classes ES6, this se comporte de manière similaire aux fonctions du constructeur.

Exemple:

<code class="language-javascript">function showThis() {
  console.log(this);
}
showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

7. call(), apply(), bind() (liaison explicite):

Ces méthodes permettent un réglage explicite de this.

• call(): invoque immédiatement la fonction, passant les arguments individuellement.
• apply(): similaire à call(), mais transmet les arguments en tant que tableau.
• bind(): Renvoie une nouvelle fonction avec this liée à un objet spécifique.

Exemple:

<code class="language-javascript">const book = {
  title: 'JavaScript Mastery',
  showTitle: function() {
    console.log(this.title);
  }
};
book.showTitle(); // Output: JavaScript Mastery</code>

8. Écouteurs d'événements:

dans les auditeurs d'événements, this se réfère généralement à l'élément qui a déclenché l'événement.

Exemple:

<code class="language-javascript">const techBook = {
  title: 'Advanced JavaScript',
  showTitle: function() {
    const arrowFunc = () => {
      console.log(this.title);
    };
    arrowFunc();
  }
};
techBook.showTitle(); // Output: Advanced JavaScript</code>

Ordre de priorité:

1. Nouvelle liaison
2. liaison explicite
3. liaison implicite
4. liaison par défaut

Conclusion:

Masterring this est crucial pour écrire JavaScript propre et au contexte. Bien que initialement difficile, la compréhension de son comportement dans différents scénarios vous permet d'écrire du code plus efficace et maintenable. La pratique est la clé! Partagez vos expériences avec this dans les commentaires ci-dessous!

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!