调整字号

ES6 快速上手:箭头函数

es6-small

ES6 添加了新的函数语法:箭头函数。语法像下面这样:

([param, param, ...]) => {
  函数体
}

几个例子:

() => { ... } //无参数
x => { ... } //一个参数
(x, y) => { ... } //多个参数
(x, y) => {
  if(x > 1) {
    ...
  }
}

可以这样用:

let foo = x => { return x + 10; }

等同于下面:

function foo(x) {
  return x + 10;
}

如果只有一个 return 语句的话,还可以简写成:

let foo = x => x + 10; // x + 10的值会被返回

当然,如果简写的话你需要注意,如果返回的是一个对象,比如一个空对象:

let foo = x => {}; //报错

这时需要外加一层小括号:

let foo = x => ({}); //OK
//或者老老实实写成:
let foo = x => {
  return {};
};

立即执行的函数(IIFE)在 ES5 中是这样:

(function(name) {
  var greetings = "Hello " + name;
  return greetings;
})("Ethan");

同样可以换成箭头函数:

(name => {
  let greeting = "Hello " + name;
  return greeting;
})("Ethan");

箭头函数有几个特性,首先,是 this 值固定。this 值取决于箭头函数定义时的上下文,与如何调用无关:

var person = {
  name: "Bob",
  sayHello: () => "Hello " + this.name;
};

var hello = person.sayHello;
hello(); //"Hello Bob"

并且,this 的值是无法改变的。一旦创建,this 值就已绑定。

第二,箭头函数不能用作构造函数,当和 new 一起使用时会报错。

第三,箭头函数没有自己的 arguments 对象。所以,在箭头函数内访问 arguments,这时访问的其实是外层函数的 arguments 对象。你可以使用 ES6 的新特性来代替 arguments

let foo = (...args) => {
  console.log(args); //和arguments一样
};

最后,箭头函数和普通函数一样,也会在脚本执行前被提升到作用域顶部。

flight