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?
this
anders behandelt wird . Es wird durch die lexikalische Umgebung definiert, in der die Funktion erstellt wurde. Dies bedeutet, dass derthis
Wert, in dem Sie diechopper
Variable erstellen, derthis
Wert der Funktion ist. Mit anderen Worten, es wird nicht auf daschopper
Objekt verwiesen .this
Wert ändern , indem Sie zuerst daschopper
Objekt erstellen und dann die Zuweisung in einer Funktionthis
ausführen, die auf dieses Objekt verweist. Dies kann mit einer Konstruktorfunktion ziemlich sauber erreicht werden.console.log()
dem Ergebnis des Methodenaufrufs. Es klappt.Antworten:
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
function
Schlüsselwort ersetzen . Der häufigste Anwendungsfall für Pfeilfunktionen sind kurze "Lambdas", die nicht neu definiertthis
werden. 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
this
dem lexikalisch einschließenden Kontext liegen undthis
der Pfeil innerhalb des Pfeils derjenige ist, der aktuell war, in dem Sie das Objekt definiert haben. Was ist zu sagen:Wenn Sie in Ihrem Fall eine Methode für ein Objekt schreiben möchten, sollten Sie einfach die herkömmliche
function
Syntax oder die in ES6 eingeführte Methodensyntax verwenden:(Es gibt kleine Unterschiede zwischen ihnen, aber sie sind nur wichtig, wenn Sie
super
in verwendengetOwner
, was Sie nicht sind, oder wenn SiegetOwner
in 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 .quelle
In dieser Zeile
getOwner: => (this.owner)
sollte stehen:Sie müssten
this
in eine Funktion deklarieren :Oder:
quelle
"TypeError: Cannot read property 'owner' of undefined\n at Object.chopper.getOwner
this
innerhalb einer Funktion deklarieren .this
bezieht sich nicht unbedingt aufwindow
. Es bezieht sich auf den aktuellen Wert vonthis
in der umgebenden Umgebung, der möglicherweise vorhanden ist oder nichtwindow
. Vielleicht hast du das gemeint. Ich möchte nur sicherstellen, dass er versteht, dass es sich nicht um einen Standardwert handelt.this
bezieht sich jetzt auf Klassevar chopperFn = function() { this.owner = 'Jhon'; this.getOwner = () => this.owner; }
.Ein kurzer Tipp, den ich befolge, um Pfeilfunktionen zu verwenden.
object.method()
Syntax verwenden. (Dies sind Funktionen, diethis
von ihrem Anrufer einen aussagekräftigen Wert erhalten .)quelle
Wenn Sie mit dem Pfeil Funktion haben, können Sie ändern
this
zuchopper
,Obwohl dies keine bewährte Methode ist, müssen Sie beim Ändern des Objektnamens diese Pfeilfunktion ändern.
quelle
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/
quelle