语法
ES6 允许使用 "箭头"(=>)定义函数, 可以简单的认为箭头的左边是函数的参数, 箭头的右边是函数的声明(函数体).
具有一个参数的简单函数
- // 当只有一个参数时, 圆括号是可选的:
- // (单一参数) => {函数声明}
- // 单一参数 => {函数声明}
- var f = v => v;
- // 等同于
- var f = function (v) {
- return v;
- };
如果箭头函数不需要参数或需要多个参数, 就使用一个圆括号 () 代表参数部分, 多个参数之间用逗号间隔.
- // 没有参数的函数应该写成一对圆括号.
- // () => {函数声明}
- var f = () => 5;
- // 等同于
- var f = function () { return 5 };
- // (参数 1, 参数 2, ..., 参数 N) => { 函数声明 }
- // (参数 1, 参数 2, ..., 参数 N) => 表达式(单一)
- // 相当于:(参数 1, 参数 2, ..., 参数 N) =>{ return 表达式; }
- var sum = (num1, num2) => num1 + num2;
- // 等同于
- var sum = function(num1, num2) {
- return num1 + num2;
- };
箭头函数的代码块部分多于一条语句, 就要使用大括号 {} 将它们括起来, 并且使用 return 语句返回.
- var add = (a, b) => {
- if (typeof a == 'number' && typeof b == 'number') {
- return a + b
- } else {
- return 0
- }
- }
如果箭头函数直接返回一个对象, 必须在对象外面加上括号(), 否则会报错.
- // 返回对象字面表达式时需给函数体加括号(), 否则会报错
- // 参数 => ({
- foo: bar
- })
- // 报错
- let getTempItem = id => {
- id: id, name: "Temp"
- };
- // 不报错
- let getTempItem = id => ({
- id: id, name: "Temp"
- });
箭头函数支持参数列表解构.
- let f = ([a, b] = [1, 2], {
- x: c
- } = {
- x: a + b
- }) => a + b + c;
- f(); // 6
支持 REST 参数和默认参数.
- // (参数 1, 参数 2, ...REST) => {
- 函数声明
- }
- // (参数 1 = 默认值 1, 参数 2, ..., 参数 N = 默认值 N) => {
- 函数声明
- }
- const numbers = (...nums) => nums;
- numbers(1, 2, 3, 4, 5)
- // [1,2,3,4,5]
- let f = (x, y = 1) => x+y;
- f(1); // 2
关于 REST 参数和默认参数, 可参考《[ES6] 函数默认参数与 REST 参数》
注意点
typeof 运算符和普通的 function 一样.
- var f = a => a;
- console.log(typeof f); // "function"
是 Function 的实例, instanceof 也返回 true.
- var f = a => a;
- console.log(f instanceof Function); // true
箭头函数不会创建自己的 this, 它只会从自己的作用域链的上一层继承 this, 而且在箭头函数中, this 的指向是固定的, 不能改变.
- // 在箭头函数中,`this` 属于词法作用域, 直接由上下文确定.
- //ES5 普通函数
- function Man(){
- this.age=22;
- return function(){
- this.age+1;
- }
- }
- var cala=new Man();
- console.log(cala())//undefined
- //ES6 箭头函数
- function Man(){
- this.age=22;
- return () => this.age+1;
- }
- var cala=new Man();
- console.log(cala())//23
不存在 arguments 对象. 如果要用, 可以用 REST 参数代替.
- // 没有 arguments
- var foo = (a,b) => {
- return arguments[0]*arguments[1]
- }
- console.log(foo(3,5))
- //arguments is not defined
不可以当作构造函数, 也就是说, 不可以使用 new 命令, 否则会抛出一个错误.
- // 不能使用 new 关键字
- var Obj = () => {
- "hello world"
- };
- var o = new Obj();
- // TypeError: Obj is not a constructor
箭头函数没有原型.
- // 没有原型
- var Obj = () => {
- };
- console.log(Obj.prototype);
- // undefined
不可以使用 yield 命令, 因此箭头函数不能用作 Generator 函数.
箭头函数在参数和箭头之间不能换行.
- var func = ()
- => 1;
- // SyntaxError: expected expression, got '=>'
箭头函数具有与常规函数不同的特殊运算符优先级解析规则.
- let callback;
- callback = callback || function() {
- }; // ok
- callback = callback || () => {
- };
- // SyntaxError: invalid arrow-function arguments
- callback = callback || (() => {
- }); // ok
参考文章
ECMAScript 6 入门 - 函数的扩展
箭头函数 - JavaScript | MDN
来源: http://www.jianshu.com/p/94bfd4d245d9