web-dev-qa-db-fra.com

Méthodes dans les objets ES6: utilisation des fonctions fléchées

Dans ES6, les deux sont légaux:

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

et, en abrégé:

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

Est-il possible d'utiliser également les nouvelles fonctions fléchées? En essayant quelque chose comme

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

ou

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

Je reçois un message d'erreur suggérant que la méthode n'a pas accès à this. S'agit-il simplement d'un problème de syntaxe, ou ne pouvez-vous pas utiliser des méthodes fat-pipe à l'intérieur des objets ES6?

javascriptecmascript-6ecmascript-harmony
58
fox

Les fonctions fléchées ne sont pas conçues pour être utilisées dans toutes les situations simplement comme une version plus courte des fonctions à l'ancienne. Ils ne sont pas destinés à remplacer la syntaxe de fonction à l'aide du mot clé function. Le cas d'utilisation le plus courant pour les fonctions fléchées est un "lambdas" court qui ne redéfinit pas this, souvent utilisé lors du passage d'une fonction en tant que rappel à une fonction.

Les fonctions fléchées ne peuvent pas être utilisées pour écrire des méthodes d'objet car, comme vous l'avez constaté, puisque les fonctions fléchées se ferment sur le this du contexte englobant lexicalement, le this dans la flèche est celui qui était en cours où vous avez défini l'objet. C'est-à-dire:

// Whatever `this` is here...
var chopper = {
    owner: 'Zed',
    getOwner: () => {
        return this.owner;    // ...is what `this` is here.
    }
};

Dans votre cas, si vous souhaitez écrire une méthode sur un objet, vous devez simplement utiliser la syntaxe traditionnelle function ou la syntaxe de méthode introduite dans ES6:

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

// or

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

(Il existe de petites différences entre elles, mais elles ne sont importantes que si vous utilisez super dans getOwner, ce que vous n'êtes pas, ou si vous copiez getOwner vers un autre objet .)

Il y a eu un débat sur la liste de diffusion es6 concernant une torsion des fonctions fléchées qui ont une syntaxe similaire mais avec leur propre this. Cependant, cette proposition a été mal reçue car il ne s'agit que de sucre de syntaxe, permettant aux utilisateurs d'économiser en tapant quelques caractères et ne fournissant aucune nouvelle fonctionnalité par rapport à la syntaxe de fonction existante. Voir le sujet fonctions flèches non liées .

100
user663031

Dans cette ligne, getOwner: => (this.owner) devrait être:

var chopper = {
    owner: 'John',
    getOwner: () => this.owner
}; //here `this` refers to `window` object.

Vous devez déclarer this dans une fonction:

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

Ou:

var chopperFn = function(){

    this.setOwner = (name) => this.owner = name;
    Object.assign(this,{
        owner: 'Jhon',
        getOwner: () => this.owner,
    })

}

var chopper = new chopperFn();
console.log(chopper.getOwner());
chopper.setOwner('Spiderman');
console.log(chopper.getOwner());
8
Walter Chapilliquen - wZVanG