EcmaScript 6 Arrow Function (箭头函数)

Posted on | In , |

基本语法

ES6 允许使用“箭头”（=>）定义函数

1
2
3
4
5
6
var f = v => v;

// 等同于
var f = function (v) {
 return v;
};

如果箭头函数不需要参数或需要多个参数，使用一个圆括号代表参数部分

1
2
3
4
5
6
7
8
9
var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function (num1, num2) {
  return num1 + num2;
};

箭头函数（arrow function）和普通函数(function)的区别？

1、语法更加简洁、清晰
2、箭头函数不会创建自己的this

箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。

3、箭头函数继承而来的this指向永远不变
4、.call()/.apply()/.bind()无法改变箭头函数中this的指向
5、箭头函数不能作为构造函数使用

1
2
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

6、箭头函数没有自己的arguments

箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。

7、箭头函数没有原型Prototype，即指向undefined；

1
2
var Foo = () => {};
console.log(Foo.prototype); // undefined

8、箭头函数不能用作Generator函数，不能使用yeild关键字

9、不绑定 super 和 new.target;