Quelle est la différence entre les fonctions fléchées et les fonctions ES6 ?

Ce que cet article vous apporte, c'est quelle est la différence entre les fonctions fléchées de l'ES6 et les fonctions ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Différentes méthodes d'écriture

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

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

2. Cela pointe vers différents points

En fonction, cela pointe vers l'objet qui appelle la fonction

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

1. 🎜 >

Dans les fonctions fléchées, cela pointe toujours vers l'environnement dans lequel la fonction est définie.

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

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

3. Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs

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

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

De plus, puisque les fonctions fléchées n'ont pas leur propre this, bien sûr, elles ne le peuvent pas. utilisez les méthodes call.(), apply() et bind() pour changer le pointeur de ceci.

4. La fonction de promotion variable

a une promotion variable, qui peut être définie après l'instruction appelante

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

La fonction flèche attribue une valeur sous la forme d'un ; littéral, donc il n'y a pas de promotion variable ;

arrowFn(); //Uncaught TypeError: arrowFn is not a function
var arrowFn = () => {
    console.log('456');
};

console.log(f1); //function f1() {}   
console.log(f2); //undefined  
function f1() {}
var f2 = function() {}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!