0%

ECMScript 6 箭头函数

JavaScript 箭头函数是 ECMAScript 6 中引入的编写函数表达式的一种简便方法。

在 JavaScript 中创建一个函数通常有两种方式:

  • 函数语句
  • 函数表达式

但现在还可以使用箭头函数

用函数语句创建一个函数如下:

1
2
3
4
function add(num1,mum2){
var res = num1 + num2;
return res;
}

但现在用函数表达式只需要一行:

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

基本语法规则

多参数传递

多个参数应该在小括号中传递,如下所示:

1
var add = (num1,num2,num3) => {return num1 + num2 + num3;};

只传递一个函数的时候,小括号可以省略,如下所示:

1
var mul = num => {return num * 666;};

不传递参数的时候,小括号不可以省略,如下所示:

1
var text = () => {console.log("hello word")};
  • 函数主体括号可选
  • return 语句可选

默认参数

箭头函数支持 ES6 的默认参数功能,如下:

1
var add = (num1=1,num2=2) => num1 + num2;

返回对象字面量

如果要使用箭头函数返回对象字面量,需要把返回对象装入小括号中,如下:

1
2
3
4
var student = (name,age) =>({
name:name,
age:age
});

this值

箭头函数不会创建自己的this,它使用封闭上下文的this值。

1
2
3
4
5
6
7
8
9
function Person(){
this.age = 0;

setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}

var p = new Person();

所以在这段代码中,传递给setInterval的函数内的this与封闭函数中的this值相同

使用箭头函数的注意事项

不能使用箭头函数作为构造函数,如下;

1
2
var Student = (name, age) => { name = name, age = age };
var jack = new Student("Jack", 6);

抛出异常

箭头函数没有原型

1
2
var Student = (name, age) => { name = name, age = age };
console.log(Student.prototype)

没有原型