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 sténographie:

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 de méthodes fat-pipe à l'intérieur des objets ES6?

Les fonctions fléchées ne sont pas conçues pour être utilisées dans toutes les situations simplement comme une version abrégée de fonctions à l'ancienne. Ils ne visent pas à remplacer la syntaxe de fonction à l'aide du functionmot - clé. Le cas d'utilisation le plus courant pour les fonctions fléchées est celui des "lambdas" courts qui ne se redéfinissent pas this, souvent utilisés 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 thiscontexte englobant lexicalement, thisla flèche à l' intérieur de la flèche est celle qui était courante là 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, voulant écrire une méthode sur un objet, vous devez simplement utiliser la functionsyntaxe traditionnelle , 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 eux, mais elles ne sont importantes que si vous utilisez superin getOwner, ce que vous n'êtes pas, ou si vous copiezgetOwner dans un autre objet.)

Il y a eu un débat sur la liste de diffusion es6 à propos d'une torsion des fonctions fléchées qui ont une syntaxe similaire mais avec la leur this. Cependant, cette proposition a été mal accueillie car il ne s'agit que d'un simple sucre de syntaxe, permettant aux gens d'économiser quelques caractères et ne fournit aucune nouvelle fonctionnalité par rapport à la syntaxe de fonction existante. Consultez la rubrique Fonctions fléchées indépendantes .

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

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

Vous devrez déclarer thisdans 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());

Un petit conseil que je suis pour utiliser les fonctions fléchées.

• Utilisez des fonctions non fléchées pour les méthodes qui utiliseront la object.method()syntaxe. (Ce sont des fonctions qui recevront une thisvaleur significative de leur appelant.)
• Utilisez la fonction fléchée pour presque tout le reste.

Cette fonction de flèche intérieure ne reflète pas le contexte de l'objet. Au lieu de cela, il donne le contexte dans lequel la méthode objet est appelée.

Vérifiez ceci, cela donne un aperçu de quand utiliser la flèche et quand non. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

Si vous devez utiliser la fonction flèche, vous pouvez passer thisà chopper,

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

Bien que ce ne soit pas la meilleure pratique, lorsque vous modifiez le nom de l'objet, vous devez modifier cette fonction de flèche.

Une autre astuce, en mode strict, thisfait toujours référence à Window au lieu d'indéfini.

  (() => {
    "use strict";
    console.log(this); // window
  })();

  (function () {
    "use strict";
    console.log(this); // undefined
  })();