Pourquoi devriez-vous éviter les fonctions fléchées lors de la définition des méthodes d'objet ES6 ?

Utilisation des fonctions fléchées dans les objets ES6

Dans ES6, il existe deux manières de définir des méthodes d'objet : en utilisant la syntaxe de fonction traditionnelle et en utilisant le raccourci formulaire. Ces deux méthodes sont valides :

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
}

Cependant, l'utilisation de fonctions fléchées dans les méthodes objet présente une histoire différente. Explorons cela plus en détail.

Fonctions fléchées et méthodes objet

Les fonctions fléchées ne conviennent pas pour définir des méthodes objet. En effet, ils héritent de la valeur this du contexte lexical environnant, qui peut ne pas être la même que la valeur this dans l'objet.

Par exemple, considérons le code suivant :

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

Dans cet exemple, this dans la méthode getOwner fait référence à l'objet window (ou à l'objet globalThis en mode strict), et non à l'objet chopper. En conséquence, l'expression this.owner renverra undefined, générant une erreur.

Syntaxe de fonction traditionnelle par rapport à la syntaxe de méthode ES6

Pour définir les méthodes d'objet, il est Il est conseillé d'utiliser la syntaxe de fonction traditionnelle ou la syntaxe de la méthode ES6, qui définissent toutes deux explicitement la valeur this dans la méthode.

Voici un exemple utilisant une fonction traditionnelle syntaxe :

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

Et voici un exemple utilisant la syntaxe de la méthode ES6 :

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};

Ces méthodes utilisent le mot-clé this pour faire référence à l'objet actuel, garantissant que l'expression this.owner renvoie la valeur correcte.

Conclusion

Alors que les fonctions fléchées offrent une syntaxe concise pour définir des fonctions, elles ne peuvent pas être utilisées comme méthodes objet dans ES6. À cette fin, il est recommandé de s'en tenir à la syntaxe de fonction traditionnelle ou à la syntaxe de méthode ES6, qui offrent toutes deux un moyen plus clair et plus fiable de définir des méthodes sur des objets.

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!