Methods in ES6 Objekte: mit Pfeilfunktionen

Question

In ES6, beide von ihnen sind legal:

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

und als Kürzel:

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

Ist es möglich, die neuen Pfeilfunktionen sowie die Verwendung ? so etwas wie

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

oder

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

Ich erhalte eine Fehlermeldung darauf hindeutet, dass das Verfahren keinen Zugang zu this versuchen. Ist das nur ein Syntaxproblem, oder können Sie keine Fat-Pipe-Methoden in ES6-Objekten verwenden?

Answer 1

Pfeilfunktionen sind nicht dafür gedacht, in jeder Situation nur als eine kürzere Version von altmodischen Funktionen verwendet zu werden. Sie sollen die Funktionssyntax nicht mit dem Schlüsselwort function ersetzen. Der gebräuchlichste Anwendungsfall für Pfeilfunktionen ist ein kurzes "lambdas", das this nicht neu definiert und oft verwendet wird, wenn eine Funktion als Callback an eine Funktion übergeben wird.

Pfeil Funktionen können nicht Objektmethoden verwendet werden, zu schreiben, weil, wie Sie gefunden haben, da Pfeil Funktionen die this der lexikalisch einschließenden Funktionskontext übernehmen, ist die this innerhalb einer Objektdefinition entweder das Fenster oder etwas anderes:

Wenn Sie eine Methode für ein Objekt schreiben möchten, sollten Sie einfach den Standard function syntax oder die in ES6 eingeführten "Kurznamenmethodennamen" verwenden.

Es gab einige Diskussionen auf der Mailingliste es6 über eine Drehung auf Pfeilfunktionen, die ähnliche Syntax aber mit ihren eigenen this haben. Dieser Vorschlag wurde jedoch nur schlecht angenommen, da es sich um reine Syntaxzuckerung handelt, die es den Benutzern ermöglicht, die Eingabe einiger weniger Zeichen zu sparen, und keine neue Funktionalität gegenüber der vorhandenen Funktionssyntax bietet. Siehe Thema unbound arrow functions.

Ein früherer Vorschlag war Strichanzahl zu reduzieren, indem „prägnante Stellen“ mit, so dass Sie nicht zu haben, return zu schreiben, wie es in

var foo = { 
    function bar() this.baz 
        ^^^^^^^^ "concise body" 
} 

aber dies wurde parseability Gründen abgelehnt.

Answer 2

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

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

würden Sie haben this in 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());

Answer 3

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

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