Schreiben und Verstehen von Pfeilfunktionen und diesem in JS

Vorwort

JavaScript hat der ES6-Syntax Pfeilfunktionen hinzugefügt. Im Vergleich zu herkömmlichen Funktionen sind Pfeilfunktionen nicht nur prägnanter, sondern weisen auch diesbezüglich Verbesserungen auf. Dies ist eine ziemlich seltsame Sache in JavaScript. In vielen Artikeln wird dies unterschiedlich interpretiert. Dieser Artikel versucht, die Beziehung zwischen Funktionen und diesem in JS zu klären.

1. So schreiben Sie Funktionen in JS

1. So schreiben Sie eine reguläre Funktion

Vor der ES6-Syntax bestand eine Funktion in JS aus dem Funktionsschlüsselwort, den Parametern „params“ und einem in geschweifte Klammern eingeschlossenen Funktionskörper. Um sie von der später erwähnten Pfeilfunktion zu unterscheiden, nennen wir eine solche Funktion zunächst eine reguläre Funktion. Reguläre Funktionen können sowohl im deklarativen als auch im Zuweisungsstil geschrieben werden. Beispiel:

function test(name) { //Deklaratives Schreiben console.log(name)
}
Test('Jerry')

let test2 = function(name) { //Aufgabe zum Schreiben von console.log(name)
}
test2('Tom')

2. So schreiben Sie Pfeilfunktionen

Durch die Einführung der ES6-Pfeilfunktionen wird das Schreiben von Funktionen prägnanter, allerdings müssen beim Schreiben bestimmte Regeln beachtet werden.

Regel 1: Pfeilfunktionen können nur im Zuweisungsstil geschrieben werden, nicht im deklarativen Stil

Beispiel:

const test = (Name) => {
 console.log(Name)
}
Test('Jerry')

Regel 2: Wenn nur ein Parameter vorhanden ist, müssen Sie keine Klammern hinzufügen. Wenn kein Parameter vorhanden ist oder mehr als ein Parameter vorhanden ist, müssen Sie Klammern hinzufügen.

Beispiel:

const test = Name => {
 console.log(Name)
}
Test('Jerry')

const test2 = (name1, name2) => {
 console.log(name1 + ' und ' + name2)
}
test2('Tom', 'Jerry')

Regel 3: Wenn der Funktionskörper nur aus einem Satz besteht, müssen Sie keine geschweiften Klammern verwenden

Beispiel:

const test = Name => console.log(Name) 

Regel 4: Wenn der Funktionskörper keine Klammern hat, müssen Sie nicht return schreiben, die Pfeilfunktion hilft Ihnen bei der Rückkehr

Beispiel:

const add = (p1, p2) => p1 + p2
hinzufügen(10, 25)

Denken Sie daran: Die geschweiften Klammern im Funktionskörper gehören zum Schlüsselwort return.

Aus den obigen Beispielen können wir erkennen, dass Pfeilfunktionen sowohl Klammern als auch geschweifte Klammern regulärer Funktionen vereinfachen. Neben diesen Vereinfachungen besteht die größte Optimierung der Pfeilfunktionen gegenüber regulären Funktionen in dieser.

2. Dies in regulären Funktionen verstehen

Bevor wir die Optimierung von Pfeilfunktionen hierfür diskutieren, müssen wir zunächst verstehen, was das ist und wie es verwendet wird. Dies ist der erste Parameter, der beim Aufruf einer Funktion mit der Call-Methode übergeben wird. Er kann beim Aufruf der Funktion geändert werden. Wenn die Funktion nicht aufgerufen wird, kann der Wert nicht bestimmt werden.

Wenn Sie die Call-Methode noch nie zum Aufrufen einer Funktion verwendet haben, ist die obige Definition möglicherweise nicht klar. Dann müssen wir zunächst die beiden Methoden des Funktionsaufrufs verstehen.

1. Reiner Funktionsaufruf

Die erste Methode ist die gebräuchlichste. Im Folgenden finden Sie ein Beispiel:

Funktionstest(Name) {
 console.log(Name)
 console.log(dies)
}
test('Jerry') //Funktion aufrufen

Diese Methode verwenden wir am häufigsten, aber diese Funktionsaufrufmethode ist nur eine Abkürzung. Die vollständige Schreibweise lautet wie folgt:

Funktionstest(Name) {
 console.log(Name)
 console.log(dies)
}
test.call(undefiniert, 'Tom')

Haben Sie oben die Aufrufmethode bemerkt, die die Funktion aufruft? Der erste Parameter, der von der Aufrufmethode empfangen wird, ist dieser, und hier übergeben wir undefined. Ist also der nach Ausführung der Funktion ausgegebene This gemäß der Definition undefiniert? Nicht wirklich.

Wenn der von Ihnen übergebene Kontext null oder undefiniert ist, ist das Fensterobjekt der Standardkontext (der Standardkontext im strikten Modus ist undefiniert).

Das, was wir hier eingegeben haben, ist das Fensterobjekt.

2. Aufrufen von Funktionen in Objekten

Schauen wir uns das Beispiel direkt an:

const obj = {
 Name: 'Jerry',
 Begrüßung: Funktion() {
 console.log(dieser.Name)
 }
}
obj.greet() //Die erste aufrufende Methode obj.greet.call(obj) //Die zweite aufrufende Methode

Im Beispiel ist die erste aufrufende Methode nur der Syntax-Zucker der zweiten aufrufenden Methode. Die zweite ist die vollständige aufrufende Methode, und die Stärke der zweiten Methode liegt darin, dass sie diese manuell angeben kann.

Beispiel für die manuelle Angabe:

const obj = {
 Name: 'Jerry',
 Begrüßung: Funktion() {
 console.log(dieser.Name)
 }
}
obj.greet.call({name: 'Spike'}) //Die Ausgabe ist Spike

Aus dem obigen Beispiel können wir ersehen, dass dies geändert wurde, als die Greet-Funktion ausgeführt wurde.

3. dies im Konstruktor

Das this im Konstruktor ist etwas Besonderes. Jeder Konstruktor gibt nach new ein Objekt zurück. Dieses Objekt ist this, das den Kontext darstellt.

Beispiel:

Funktion Test() {
 dieser.name = "Tom"
}
lass p = neuer Test()
console.log(Typ von p) //Objekt
console.log(p.name) // Tom

4. Aufrufen von Funktionen in window.setTimeout() und window.setInterval()

Das this in den Funktionen window.setTimeout() und window.setInterval() ist etwas Besonderes. Das this darin ist standardmäßig auf das Fensterobjekt eingestellt.

Kurz zusammengefasst: Die vollständige Methode zum Funktionsaufruf besteht in der Verwendung der Aufrufmethode, einschließlich test.call(context, name) und obj.greet.call(context,name), wobei context der Kontext beim Aufruf der Funktion ist, also this, this kann jedoch über die Aufrufmethode geändert werden; der Konstruktor ist etwas speziell, sein this zeigt direkt auf das nach new zurückgegebene Objekt; window.setTimeout() und window.setInterval() setzen this standardmäßig auf das Fensterobjekt.

3. Verständnis in Pfeilfunktionen

Wir haben oben viel darüber gesprochen. Dies ist der erste Parameter, der übergeben wird, wenn eine Funktion mit der Aufrufmethode aufgerufen wird, und er kann manuell geändert werden. Daher ist es zu mühsam, seinen Wert zu bestimmen. Das Auftreten von Pfeilfunktionen hilft uns jedoch, dies festzustellen.

1. Funktion 1 der Pfeilfunktion: Standardmäßige Bindung an das Äußere

Wie oben erwähnt: Der Wert hiervon kann mithilfe der Aufrufmethode geändert werden, und wir können den Wert hiervon nur beim Aufruf bestimmen. Wenn wir Pfeilfunktionen verwenden, bindet die Pfeilfunktion standardmäßig den Wert des äußeren „This“ für uns, sodass der Wert von „This“ in der Pfeilfunktion derselbe ist wie der des äußeren „This“.

Beispiel ohne Pfeilfunktion:

const obj = {
	a: Funktion() { Konsole.log(dies) } 
}
obj.a() //Die Ausgabe ist das Obj-Objekt

Beispiele für die Verwendung von Pfeilfunktionen:

const obj = {
 ein: () => {
 console.log(dies)
 }
}
obj.a() //Die Ausgabe ist ein Fenster

Im Beispiel der Verwendung von Pfeilfunktionen verwendet die Pfeilfunktion standardmäßig kein eigenes This, sondern ist mit dem äußeren This konsistent. Das äußerste This ist das Fensterobjekt.

2. Das zweite Merkmal der Pfeilfunktion: Sie können die Aufrufmethode nicht verwenden, um dies im Inneren zu ändern

Dies ist auch leicht zu verstehen. Wir haben zuvor gesagt, dass das this einer Funktion manuell mithilfe der Call-Methode angegeben werden kann. Um die Komplexität zu verringern, können Pfeilfunktionen die Call-Methode nicht verwenden, um this anzugeben.

Beispiel:

const obj = {
 ein: () => {
 console.log(dies)
 }
}
obj.a.call('123') //Das Ergebnis ist immer noch das Fensterobjekt

Da wir oben erwähnt haben, dass das Standard-This in der Funktion window.setTimeout() „window“ ist, können wir auch die Pfeilfunktion verwenden, um dessen This mit dem äußeren This in Einklang zu bringen:

Beispiel für window.setTimeout():

const obj = {
 a: Funktion() {
 console.log(dies)
 fenster.setTimeout(() => { 
  console.log(dies) 
 }, 1000)
 }
}
obj.a.call(obj) //Das erste ist das Obj-Objekt, das zweite ist ebenfalls das Obj-Objekt

Ich denke, jeder versteht, dass die Funktion obj.a die Pfeilfunktion nicht verwendet, da ihr „this“ immer noch ein „obj“ ist und die Funktion in setTimeout die Pfeilfunktion verwendet. Daher ist sie mit dem äußeren „this“ konsistent, das ebenfalls ein „obj“ ist. Wenn die Funktion in setTimeout die Pfeilfunktion nicht verwendet, sollte sie als Fensterobjekt eingegeben werden.

4. Dies sind Funktionen bei der Verschachtelung mehrschichtiger Objekte

Hier ist eine kleine Verwirrung, die mir beim Lernen begegnet ist. Das „this“ in der Pfeilfunktion ist mit der äußeren Schicht konsistent. Wenn diese äußere Schicht aber viele Schichten hat, mit welcher Schicht ist es konsistent?

Nehmen wir direkt ein Beispiel:

const obj = {
 a: Funktion() { Konsole.log(dies) },
 B: {
 	c: Funktion() {Konsole.log(dies)}
	}
}
obj.a() // druckt das Obj-Objekt, entspricht obj.a.call(obj)
obj.bc() // druckt das obj.b-Objekt, entspricht obj.bccall(obj.b)

Der obige Code entspricht vollständig der Intuition. Ersetzen Sie als Nächstes die Funktion, die obj.bc entspricht, durch eine Pfeilfunktion. Das Ergebnis lautet wie folgt:

const obj = {
 a: Funktion() { Konsole.log(dies) },
 B: {
 	c: () => {console.log(dies)}
	}
}
obj.a() //Die Ausgabe ohne Pfeilfunktion ist obj
obj.bc() //Was gedruckt wird, ist das Fensterobjekt! !

Nach dem Aufruf von obj.a wird das Objekt obj ausgedruckt, während nach dem Aufruf von obj.bc das Fensterobjekt anstelle von obj ausgedruckt wird. Dies bedeutet, dass bei der Verschachtelung von Objekten mit mehreren Ebenen dies in der Pfeilfunktion mit der äußersten Ebene übereinstimmt.

Der obige Inhalt ist der Wissenspunkt, den der Autor beim Erlernen der Pfeilfunktion aussortiert hat. Wenn Fehler vorhanden sind, kritisieren und korrigieren Sie diese bitte! Dies ist der dritte Artikel, den ich über Nuggets geschrieben habe. Danke fürs Lesen!

Verweis auf diesen Artikel: Was ist das wert? Machen Sie es einmal klar

Zusammenfassen

Damit ist dieser Artikel über das Schreiben und Verstehen von Pfeilfunktionen und diesem in JS abgeschlossen. Weitere relevante JS-Pfeilfunktionen und diesen Inhalt finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!