Methoden in ES6-Objekten: Verwenden von Pfeilfunktionen

In ES6 sind beide legal:

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

und als Abkürzung:

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

Ist es möglich, auch die neuen Pfeilfunktionen zu verwenden? Beim Versuch so etwas

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

oder

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

Ich erhalte eine Fehlermeldung, die darauf hinweist, dass die Methode keinen Zugriff auf hat this. Ist dies nur ein Syntaxproblem oder können Sie Fat-Pipe-Methoden nicht in ES6-Objekten verwenden?

Pfeilfunktionen sind nicht dafür ausgelegt, in jeder Situation lediglich als kürzere Version altmodischer Funktionen verwendet zu werden. Sie sollen die Funktionssyntax nicht durch das functionSchlüsselwort ersetzen . Der häufigste Anwendungsfall für Pfeilfunktionen sind kurze "Lambdas", die nicht neu definiert thiswerden. Diese werden häufig verwendet, wenn eine Funktion als Rückruf an eine Funktion übergeben wird.

Pfeilfunktionen können nicht zum Schreiben von Objektmethoden verwendet werden, da, wie Sie festgestellt haben, Pfeilfunktionen über thisdem lexikalisch einschließenden Kontext liegen und thisder Pfeil innerhalb des Pfeils derjenige ist, der aktuell war, in dem Sie das Objekt definiert haben. Was ist zu sagen:

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

Wenn Sie in Ihrem Fall eine Methode für ein Objekt schreiben möchten, sollten Sie einfach die herkömmliche functionSyntax oder die in ES6 eingeführte Methodensyntax verwenden:

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

// or

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

(Es gibt kleine Unterschiede zwischen ihnen, aber sie sind nur wichtig, wenn Sie superin verwenden getOwner, was Sie nicht sind, oder wenn Sie getOwnerin ein anderes Objekt kopieren .)

Auf der es6-Mailingliste gab es einige Debatten über eine Änderung der Pfeilfunktionen, die eine ähnliche Syntax haben, aber eine eigene this. Dieser Vorschlag wurde jedoch schlecht aufgenommen, da es sich lediglich um Syntaxzucker handelt, der es den Benutzern ermöglicht, die Eingabe einiger Zeichen zu speichern, und keine neue Funktionalität gegenüber der vorhandenen Funktionssyntax bietet. Siehe das Thema ungebundene Pfeilfunktionen .

In dieser Zeile getOwner: => (this.owner)sollte stehen:

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

Sie müssten thisin eine Funktion deklarieren :

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

Oder:

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());

Ein kurzer Tipp, den ich befolge, um Pfeilfunktionen zu verwenden.

• Verwenden Sie Nicht-Pfeil-Funktionen für Methoden, die object.method()Syntax verwenden. (Dies sind Funktionen, die thisvon ihrem Anrufer einen aussagekräftigen Wert erhalten .)
• Verwenden Sie die Pfeilfunktion für fast alles andere.

Wenn Sie mit dem Pfeil Funktion haben, können Sie ändern thiszu chopper,

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

Obwohl dies keine bewährte Methode ist, müssen Sie beim Ändern des Objektnamens diese Pfeilfunktion ändern.

Diese Innenpfeilfunktion spiegelt nicht den Kontext des Objekts wider. Stattdessen gibt es den Kontext an, in dem die Objektmethode aufgerufen wird.

Überprüfen Sie dies. Dies gibt einen Einblick darüber, wann Pfeil verwendet werden muss und wann nicht. https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/