01前端/JS - 箭头函数

  • 更新时间：2020-02-11 04:03
  • 创建时间：2018-12-17 03:16

适用场景

  • 一般在需要使用匿名函数时使用

误用场景

  • 函数作为构造函数
  • 需要修改函数的this
  • 需要使用arguments对象或访问prototype属性
  • 需要作为生成器函数

例如

需要修改函数的this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var user = {
  name: "zhang",
  appendAF: val => {
    console.log(this.name + val); // apply不绑定this（箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。）
  },
  appendF: function(val) {
    console.log(this.name + val); // apply绑定this
  }
};

function call(obj, fname, ...args) {
  console.log(obj);
  obj[fname].apply(obj, args);
}

call(user, "appendAF", "qqq"); // undefinedqqq
call(user, "appendF", "qqq"); // zhangqqq

生成器函数

1
2
3
4
5
6
7
var genAF = (* () => {
    yield 123;
})(); // 语法错误

var genF = (function* (){
    yield 123;
})(); // 正确

参考

箭头函数 | MDN