Comment « ceci » fonctionne-t-il différemment dans les fonctions fléchées ES6 par rapport aux fonctions normales ?

Comprendre "this" dans les fonctions fléchées ES6

En JavaScript, la valeur de this dépend du contexte dans lequel il est utilisé. Lorsque vous travaillez avec des fonctions fléchées, le concept de « lié lexicalement » devient pertinent, ce qui dicte son comportement.

Les fonctions fléchées héritent de la valeur de this du contexte englobant, où elles sont définies. Contrairement aux fonctions classiques, les fonctions fléchées ne créent pas leur propre portée pour cela. Considérez le code suivant :

var testFunction = () => {
  console.log(this);
};
testFunction();

Ici, la fonction fléchée testFunction capture la valeur de this à partir de son contexte englobant, qui dans ce cas est la portée globale. Par conséquent, console.log(this) afficherait l'objet global.

En revanche, les fonctions régulières peuvent créer leur propre portée pour cela. Par exemple :

function Person() {
  this.age = 0;

  const increaseAge = function() {
    this.age++; // `this` refers to the Person object
  };

  increaseAge();
}

const p = new Person();

Dans cet exemple, la fonction IncreaseAge est imbriquée dans le constructeur Person. Lorsqu'elle est invoquée, this fait référence à l'instance de la classe Person car elle a été créée avec le mot-clé new.

Pour résumer, les fonctions fléchées héritent de la valeur de this de leur contexte englobant, garantissant qu'elle reste cohérente avec le code environnant. Ce comportement diffère des fonctions classiques, qui créent leur propre champ d'application. Comprendre cette différence clé est crucial pour gérer correctement cela dans les fonctions fléchées dans le développement JavaScript.

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!