Was ist bei der Verwendung von es6-Pfeilfunktionen zu beachten?

Hinweise: 1. Die Pfeilfunktion ändert den Punkt davon in der Funktion, um mit dem Punkt davon im übergeordneten Bereich übereinzustimmen. 2. Sie kann nicht als Konstruktor verwendet werden, das heißt, der neue Befehl kann nicht verwendet werden ; 3. Das arguments-Objekt kann nicht verwendet werden ;4. Der yield-Befehl kann nicht verwendet werden und kann nicht als Generatorfunktion verwendet werden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

In der neuen Syntax von es6 erscheinen Pfeilfunktionen.

ES6 ermöglicht die Verwendung von „Pfeilen“ (=>) zum Definieren von Funktionen.

		function fun(a){ return a; }
// ↓ 去掉 function 在 ( ) 和 { } 之间添加 => 
		var fun = (a) => { return a; }  
// ↓ 如果只有一个形参可省略 ( ) 如果一个形参都没有，必须加( )         
		var fun = a => { return a; }  
// ↓ 如果函数体只有一句话，可省略{ }，如果仅有的这句话还是 return， 则必须省略 return         
		var fun = a => a

Hinweise zu Pfeilfunktionen in ES6

(1) Die Pfeilfunktion ändert den Punkt von this in der Funktion, um mit dem Punkt von this im übergeordneten Bereich übereinzustimmen.

Das Objekt this im Funktionskörper ist das Objekt, in dem es definiert ist, und nicht das Objekt, in dem es verwendet wird.

(2) kann nicht als Konstruktor verwendet werden, das heißt, der neue Befehl kann nicht verwendet werden, da sonst ein Fehler ausgegeben wird.

(3) Das Argumentobjekt kann nicht verwendet werden, da das Objekt nicht im Funktionskörper vorhanden ist. Wenn Sie es verwenden möchten, können Sie stattdessen den Rest-Parameter verwenden.

(4) Der Yield-Befehl kann nicht verwendet werden, daher können Pfeilfunktionen nicht als Generatorfunktionen verwendet werden.

Von den oben genannten vier Punkten ist der erste Punkt besonders hervorzuheben. Der Zeiger dieses Objekts ist variabel, aber in einer Pfeilfunktion ist er fest.

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

Im obigen Code ist der Parameter von setTimeout eine Pfeilfunktion. Die Definition dieser Pfeilfunktion wird wirksam, wenn die foo-Funktion generiert wird, und ihre tatsächliche Ausführung wartet erst 100 Millisekunden später. Wenn es sich um eine normale Funktion handelt, sollte diese bei der Ausführung auf das globale Objektfenster zeigen und zu diesem Zeitpunkt 21 ausgeben. Die Pfeilfunktion bewirkt jedoch, dass dies immer auf das Objekt zeigt, bei dem die Funktionsdefinition wirksam wird (in diesem Fall {id: 42}), sodass die Ausgabe 42 ist.
Mit der Pfeilfunktion kann dies in setTimeout an den Bereich gebunden werden, in dem es definiert ist, anstatt auf den Bereich zu verweisen, in dem es ausgeführt wird. Hier ist ein weiteres Beispiel.

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

Im obigen Code werden zwei Timer innerhalb der Timer-Funktion eingerichtet, wobei Pfeilfunktionen bzw. normale Funktionen verwendet werden. Die this-Bindung des ersteren ist im Bereich definiert (d. h. die Timer-Funktion), und die this-Bindung des letzteren zeigt auf den Bereich, in dem sie ausgeführt wird (d. h. das globale Objekt). Nach 3100 Millisekunden wurde timer.s1 also dreimal aktualisiert, timer.s2 jedoch kein einziges Mal.

Die Pfeilfunktion kann diesen Punkt fixieren. Diese Funktion ist sehr hilfreich für die Kapselung von Rückruffunktionen. Unten sehen Sie ein Beispiel, bei dem die Rückruffunktion eines DOM-Ereignisses in einem Objekt gekapselt ist.

var handler = {
  id: '123456',

  init: function() {
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

In der Init-Methode des obigen Codes wird eine Pfeilfunktion verwendet, die dazu führt, dass diese in der Pfeilfunktion immer auf das Handler-Objekt zeigt. Andernfalls meldet die Zeile this.doSomething beim Ausführen der Rückruffunktion einen Fehler, da diese zu diesem Zeitpunkt auf das Dokumentobjekt verweist.

Die Fixierung dieses Zeigens liegt nicht daran, dass es einen Mechanismus gibt, um dies innerhalb der Pfeilfunktion zu binden. Der eigentliche Grund ist, dass die Pfeilfunktion überhaupt kein eigenes Dies hat, was dazu führt, dass das interne Dies das Dies des Äußeren ist Codeblock. Gerade weil es dies nicht hat, kann es nicht als Konstruktor verwendet werden.

Der Code zum Konvertieren der Pfeilfunktion in ES5 lautet also wie folgt.

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

Im obigen Code zeigt die konvertierte ES5-Version deutlich, dass die Pfeilfunktion überhaupt kein eigenes This hat, sondern auf das äußere This verweist.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

Das obige ist der detaillierte Inhalt vonWas ist bei der Verwendung von es6-Pfeilfunktionen zu beachten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!