ES6中的箭头函数

Posted 2020-08-24

讲真，自从出了箭头函数之后，再也不用担心 this 问题了，而且就简化代码这一方面来说，箭头函数可谓是装逼神器。

箭头函数有几点需要注意，如果 return 值就只有一行表达式，可以省去 return，默认表示该行是返回值，否则需要加一个大括号和 return。如果参数只有一个，也可以省去括号，两个则需要加上括号。比如下面的例子：

var f = v => v*2;
// 等价于
var f = function(v){
  return v*2;
}

// 判断偶数
var isEven = n => n % 2 == 0;

// 需要加 return
var = (a, b) => {
  if(a >= b)
    return a;
  return b;
}

普通函数的 this 是可变的，我们把函数归为两种状态，一种是定义时，一种是执行时，如果仔细研究会发现，函数中的 this 始终是指向函数执行时所在的对象。比如全局函数执行时，this 执行 window，对象的方法执行时，this 执行该对象，这就是函数 this 的可变。而箭头函数中的 this 是固定的，看下面的例子：

function obj(){
  setTimeout(()=>console.log(this.id), 20);
}
var id = 1;
obj.call({id: 2}); // 2

执行的结果是 2 而不是全局的 1，表示 setTimeout 函数执行的时候，this 指向的不是 window，这和普通函数是有区别的。

实际上，箭头函数并没有 this 对象，将箭头函数转成 ES5 会发现：

// ES6
function obj() {
  setTimeout(()=>console.log(this.id), 20);
}

// ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log(this.id);
  }, 20);
}

通过 call aply 等方法是无法绑定 箭头函数中的 this：

var f = () => this.x;
var x = 1;
f.call({x: 2}); // 1

对 this 的一个总结就是 在对象的方法中直接使用箭头函数，会指向 window，其他箭头函数 this 会指向上一层的 this，箭头函数并没有存储 this：

var obj = {
  id: 1,
  foo: ()=>{
    return this.id;
  }
}
var id = 2;
obj.foo(); // 2

除了 this 之外，箭头函数的 arguments 也是不存在，不能使用 new 来构造，也不能使用 yield 命令。