首页 > 代码库 > ES6中的箭头函数

ES6中的箭头函数

讲真,自从出了箭头函数之后,再也不用担心 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 命令。

ES6中的箭头函数