Was ist der Unterschied zwischen der ES5-Funktion und der ES6-Pfeilfunktion?

Unterschiede: 1. Die ES6-Pfeilfunktion ist unterschiedlich und die ES5-Funktion ist unterschiedlich hat nur einen Parameter, die Pfeilfunktion. Wenn die Funktion nur einen Wert zurückgibt, kann die Pfeilfunktion die geschweiften Klammern weglassen. Dies zeigt auf das Objekt, auf das die Funktion zeigt aufgerufen wird, während die Pfeilfunktion bei der Definition auf diesen Punkt zeigt, also auf das globale Fensterobjekt.

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

es6-Pfeilfunktion

Die Pfeilfunktion ist eine neue Darstellung von Funktionen in es6. Es bringt die Einfachheit der Funktionen auf die Spitze! Schauen wir uns zunächst die einfachste Pfeilfunktion an:

let fn = a => a
var m = prompt()
alert(fn(m))

Menschen, die zum ersten Mal mit Pfeilfunktionen in Berührung kommen, werden möglicherweise von der prägnanten Syntax überrascht sein! Vergleichen wir es mit der Syntax von es5.

let fn=function(a){
    return a;
}
var m = prompt()
alert(fn(m))

: () => {};

Verwenden Sie beispielsweise die Map-Methode, um das ursprüngliche Array dem entsprechenden neuen Array zuzuordnen:

//ES3，ES5写法
var a = [1,2,3,4,5];
var b = a.map(function(i) {
  return i + 1
});
 console.log(a,b);

Console results

function a(){}

ES6箭头函数： () => {};

//ES6写法
let a = [1,2,3,4,5];
let b = a.map(i => i + 1)
console.log(a,b);

Console Ergebnis:

Zusammenfassung: Pfeilfunktionen und gewöhnliche Funktionen müssen let sein; wenn die Funktion nur einen Parameter hat, können die Klammern weggelassen werden, und wenn die Funktion nur einen Wert zurückgibt, können die geschweiften Klammern weggelassen werden

Dann ~ hier Lassen Sie mich auch über das Problem der Pfeilfunktion dieses Zeigens sprechen.

Hinweis: Gewöhnliche Funktion zeigt auf: das Objekt, auf das die Funktion aufgerufen wird, Pfeilfunktion: den Punkt davon, wenn sie definiert ist (zeigt auf das globale Fensterobjekt)

Ein weiteres Beispiel:

//ES3，ES5
function foo(){
   this.a = 'a';
   this.b = 'b';
   this.c = {
      a: 'a+',
      b: function() {
        return this.a
      }
   }
}
console.log(new foo().c.b());

//ES6
function foo2(){
  this.a = 'a';
  this.b = 'b'; 
  this.c = {
    a:'a+',
    b:() => {
      return this.a
    }
  }
}
console.log(new foo2().c.b());

Konsoleneffekt:

Hier können Sie sehen, dass nach der Instanziierung eines foo-Objekts die b-Methode im c-Objekt aufgerufen wird. In einer normalen Funktion zeigt dies auf das Objekt, für das die Funktion aufgerufen wird, also das c-Objekt, sodass a+ ausgegeben wird. In der ES6-Pfeilfunktion ist this.a im Funktionskörper this.a, das vom Konstruktor foo definiert wird, sodass a ausgegeben wird.

【Verwandte Empfehlungen:

Javascript-Video-Tutorial

,

Programmiervideo】

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen der ES5-Funktion und der ES6-Pfeilfunktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!