Pourquoi ne puis-je pas utiliser les fonctions fléchées pour les méthodes objet dans ES6 ?

Fonctions fléchées dans les objets ES6

Dans ES6, vous pouvez définir des méthodes dans les objets en utilisant à la fois la syntaxe de fonction traditionnelle et la syntaxe de méthode abrégée introduite dans le langage :

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

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

Cependant, vous pouvez rencontrer des limitations lorsque vous essayez d'utiliser les fonctions fléchées dans les méthodes objet. Par exemple, l'utilisation de la syntaxe suivante entraînera une erreur :

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

ou

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

Explication

Les fonctions fléchées ont des caractéristiques spécifiques qui les rendent impropres à une utilisation comme méthodes objet.

• Lexical Portée : Les fonctions fléchées héritent de leur valeur this de la portée lexicale environnante, et non de l'objet dans lequel elles sont définies. Cela signifie que ceci dans une fonction flèche fait référence au contexte dans lequel l'objet a été défini, et non à l'objet lui-même.

Par conséquent, lorsque vous définissez une fonction flèche dans un objet ES6, cela dans la fonction fera référence au contexte dans lequel l'objet a été créé. Par exemple, si vous définissez l'objet chopper dans une portée globale, cela dans getOwner fera référence à la portée globale, pas à l'objet chopper.

Solution

Pour écrire méthodes d'objet dans ES6, vous devez utiliser la syntaxe de fonction traditionnelle ou la syntaxe de méthode abrégée spécialement conçue pour les objets :

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

// or

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

Ces méthodes utilisent la bonne liaison, qui fait référence à l'objet chopper.

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!