Inhaltsverzeichnis lesen
Pfeilfunktionen haben kein eigenes this, was mit der äußeren Funktion übereinstimmt
Wenn alle Funktionen ausgeführt werden, wird ein Funktionsausführungskontext erstellt. Es wird eine Variable this im Ausführungskontext gewöhnlicher Funktionen geben, aber Pfeilfunktionen nicht.
Wenn dies in der Pfeilfunktion erscheint, wird es zum Zeitpunkt der Definition immer das this in der Bereichskette und das nächste nehmen. In der Demo unten wird zum Beispiel das this in der globalen Ausführungsumgebung genommen und zeigt auf das globale Objekt.
<script>
var id = 'wgchen'
// 箭头函数定义在全局作用域
let fun1 = () => {
console.log(this.id)
}
fun1(); // 'wgchen'
// this的指向不会改变，永远指向Window对象
fun1.call({
id: 'Obj' }) // 'wgchen'
</script>
Denkfrage: Was wird der folgende Code ausgeben?
<script>
var id = 'wgchen'
function fun1() {
// setTimeout中使用普通函数
setTimeout(function fun3() {
console.log(this.id)
}, 2000);
}
function fun2() {
// setTimeout中使用箭头函数
setTimeout(() => {
console.log(this.id)
}, 2000);
}
fun1(); // 'wgchen'
fun2(); // 'wgchen'
fun1.call({
id: 'Obj' }) // 'wgchen'
fun2.call({
id: 'Obj' }) // 'Obj'
</script>
1. Fun3 selbst hat dies, weil setTimout fun3 im globalen Kontext ausführen lässt, und dies zeigt auf die globale Ausführungsumgebung;
2. In ähnlicher Weise lässt setTimout die Pfeilfunktion im globalen Kontext ausführen, aber die Pfeilfunktion selbst hat dies nicht, sie sucht entlang der Bereichskette, um dies zu finden, das in fun2 erstellt wurde, was auch auf die globale Ausführungsumgebung verweist;
3. Während des Aufrufprozesses von fun1.call wird das this-Zeigen von fun1 modifiziert, aber fun3 selbst erzeugt dies auch, und setTimeout macht diesen Punkt zur globalen Ausführungsumgebung;
4. Während des Aufrufprozesses von fun1.call wird das this-Zeigen von fun1 geändert, die Pfeilfunktion hat dies nicht und das this von fun1 wird gemäß der Scope-Kette gefunden, sodass es schließlich auf {id: 'Obj '}.
Pfeilfunktionen können nicht als Konstruktoren verwendet werden
Da die Pfeilfunktion keine eigene this-Variable hat, haben wir keine Möglichkeit, den Zeiger davon zu ändern, sodass wir sie weder als Konstruktor verwenden können noch ein Prototypobjekt haben.
let Fun = (name, age) => {
this.name = name
this.age = age
}
// 报错
let p = new Fun('mybj', 4)
Pfeilfunktionen haben kein Argumentobjekt
Wahrscheinlich verwenden viele Leute das arguments-Objekt nicht, es ist eine lokale Variable, die in allen normalen Funktionen verfügbar ist.
Stellt die übergebenen Parameter beim Aufruf der Funktion dar. Das arguments-Objekt ist kein Array, sondern ein Array-ähnliches Array.
Es hat keine Array-Eigenschaften wie Slice und andere Methoden, mit Ausnahme der Eigenschaft length und index.
Daher wird es normalerweise verwendet Array.prototype.slice.call(arguments)/[...arguments] , um es in ein Array zu konvertieren.
<script>
let showArguments = function () {
// Arguments(2) ['params1', 'params2', callee: ƒ, Symbol(Symbol.iterator): ƒ]
console.log(arguments)
// ['params1', 'params2']
console.log(Array.prototype.slice.call(arguments))
}
showArguments('params1', 'params2')
</script>
Längeneigenschaft, die Pfeilfunktionen und normalen Funktionen gemeinsam ist
Dieser Teil gehört nicht zur Unterscheidung, aber ich möchte ihn hier hinzufügen. Dies ist auch ein ungewöhnliches Attribut, und jeder, der einige Probleme mit dem Handziehen hatte, sollte es verwendet haben.
Das lengthAttribut bezieht sich auf die Anzahl der formalen Parameter
, genauer gesagt:
die Anzahl der Parameter vor dem ersten hat den Standardwert und beinhaltet nicht die Anzahl der restlichen Parameter.
Entsprechend bezieht es arguments.lengthsich auf die Anzahl der aktuellen Parameter.
<script>
const showLength = function(a, b, c, d){
console.log(`实际参数的个数：${
arguments.length}`)
}
console.log(`形参的个数：${
showLength.length}`) //形参的个数：4
//形参的个数：3
console.log(`形参的个数：${
showLength.bind(this, '3').length}`)
showLength('1','2');// 实际参数的个数：2
showLength.call(this, '3') // 实际参数的个数：1
</script>
