箭头函数简单概述

ES6 引入了一种全新的声明函数的方法:箭头函数 (Arrow Functions)。

箭头函数主要在以下几个部分不同于传统的 JavaScript 函数:

  • 没有 thissuperargumentsnew.target 绑定。thissuperargumentsnew.target 的值由最近的不包含箭头函数的作用域决定

  • 不能被 new 调用 - 箭头函数内部没有 [[Construct]] 方法,因此不能当做构造函数使用。

  • 没有 prototype - 既然不能使用 new 调用箭头函数,那么 prototype 就没有存在的理由了。

  • 不能更改 this - this 的值不能在函数内部修改。在函数的整个生命周期内,this 是不会变的。

  • 没有 arguments 对象 - 既然箭头函数没有 arguments 绑定,那么只能靠命名或者剩余参数来访问函数参数了。

  • 不允许重复命名参数 - 无论在非严格模式还是严格模式下,箭头函数都不允许重复的命名参数存在。(而在传统函数下,只有严格模式的时候才禁止这种行为)。

为什么存在这种规定呢?

首先,在 JavaScript 编程中 this 的绑定往往是错误的根源。 其次,限制 this 可以让 JavaScript 引擎对一些操作进行优化。

另外,其他方面上的差异也是为了减少错误发生的风险。


语法:

箭头函数的语法可以有多种变体。所有变体都是以参数开头,接着箭头,函数主体结尾。

var reflect = value => value;

// 等同于:

var reflect = function(value) {
  return value;
};

当箭头函数只有一个参数时,该参数可以直接使用而不需要额外的语法。接着则是箭头和表达式。(即使没有写 return 语句也可以返回该参数)

下面的是传多个参数的写法:

var sum = (num1, num2) => num1 + num2;

// 等同于:

var sum = function(num1, num2) {
  return num1 + num2;
};

没有参数的写法:

var getName = () => 'LiLei';

// 等同于:

var getName = function() {
  return 'LiLei';
}

函数主体有多条语句时 (用花括号包裹语句):

var sum = (num1, num2) => {
  return num1 + num2;
}

// 等同于:

var sum = function(num1, num2) {
  return num1 + num2;
}

如果想创建空函数:

var doNothing = () => {};

// 等同于:

var doNothing = function() {};

当不想用传统的函数主体方式返回一个对象字面量的时候:

var getObj = id => ({ id: id, name: 'LiLei' });  // 必须把对象放在括号中

// 等同于:

var getObj = function(id) {
  return {
    id: id,
    name: 'LiLei'
  };
}

将对象字面量放在括号内说明了其并非是函数主体。