Was ist der Unterschied zwischen ES6-Pfeilfunktionen und -Funktionen?

In diesem Artikel erfahren Sie, was der Unterschied zwischen ES6-Pfeilfunktionen und -Funktionen ist. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Verschiedene Schreibmethoden

// function的写法
function fn(a, b){
    return a+b;
}

2. Die Ausrichtung darauf ist unterschiedlich

In der Funktion zeigt dies auf das Objekt, das die Funktion aufruft;

// 箭头函数的写法
let foo = (a, b) =>{ return a + b }

Bei Pfeilfunktionen zeigt dies immer auf die Umgebung, in der die Funktion definiert ist.

//使用function定义的函数
function foo(){
    console.log(this);
}
var obj = { aa: foo };
foo(); //Window
obj.aa() //obj { aa: foo }

//使用箭头函数定义函数
var foo = () => { console.log(this) };
var obj = { aa:foo };
foo(); //Window
obj.aa(); //Window

3. Pfeilfunktionen können nicht als Konstruktoren verwendet werden

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => {
     this.s1++;
     console.log(this);
  }, 1000); // 这里的this指向timer
  // 普通函数
  setInterval(function () {
    console.log(this);
    this.s2++; // 这里的this指向window的this
  }, 1000);
}

var timer = new Timer();

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

//使用function方法定义构造函数
function Person(name, age){
    this.name = name;
    this.age = age;
}
var lenhart =  new Person(lenhart, 25);
console.log(lenhart); //{name: 'lenhart', age: 25}

Da Pfeilfunktionen außerdem kein eigenes this haben, können sie natürlich nicht call(), apply() oder verwenden bind() Diese Methoden ändern den Zeiger davon.

4. Die Variablenförderung

Funktion verfügt über eine Variablenförderung, die nach der aufrufenden Anweisung definiert werden kann

//尝试使用箭头函数
var Person = (name, age) =>{
    this.name = name;
    this.age = age;
};
var lenhart = new Person('lenhart', 25); //Uncaught TypeError: Person is not a constructor

Die Pfeilfunktion weist einen Wert in Form eines Literals zu. und es gibt keine variable Werbung;

foo(); //123
function foo(){
    console.log('123');
}

rrree

                                                                   

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