Pourquoi `bind()` ne fonctionne-t-il pas avec `this` des fonctions fléchées ?

L'énigme de la liaison de « ceci » dans les fonctions de flèche : un dilemme dévoilé

Malgré la simplicité séduisante des fonctions de flèche, leur comportement impénétrable concernant ' cela a intrigué de nombreux développeurs. L'incapacité de lier « ceci » à un contexte spécifique au sein d'une fonction flèche est devenue une source récurrente de frustration.

Pour illustrer le dilemme, considérons ce code :

const f = () => console.log(this);

const o = { a: 42 };

const fBound = f.bind(o);

fBound(); // Expected: { a: 42 }, Actual: { window: Window }

Dans cet exemple , nous essayons de lier le contexte 'this' de la fonction flèche 'f' à l'objet 'o' en utilisant la méthode 'bind()'. Cependant, l'invocation de « fBound() » enregistre inexplicablement l'objet global « window » au lieu de l'objet « o » attendu.

Ce comportement déroutant est enraciné dans la nature inhérente des fonctions fléchées. Contrairement aux fonctions normales, qui ont leur propre contexte « ce », les fonctions fléchées héritent de leur liaison « ce » de la portée lexicale environnante. Dans ce cas, « f » a été défini dans la portée globale, ce qui rend « this » lié à l'objet global « window ».

La spécification ECMAScript 2015 indique clairement :

"Toute référence à Les arguments, super, this ou new.target dans une ArrowFunction doivent se résoudre en une liaison dans un environnement lexicalement englobant. "

Ainsi, relier «ceci» dans une fonction de flèche devient impossible. 'this' restera éternellement ancré au contexte dans lequel la fonction flèche a été définie.

Si l'utilisation significative de 'this' est cruciale pour votre code, la ligne de conduite prudente consiste à utiliser des fonctions régulières au lieu de fonctions de flèche. Les fonctions régulières offrent un meilleur contrôle sur la liaison « this », vous permettant de lier « this » explicitement au contexte souhaité à l'aide de « bind() » ou d'autres méthodes.

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!