参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
基础语法
(参数1, 参数2, …, 参数N) => { 函数声明 }
例如:
var f = (num1, num2) => {
return num1*num2
};
console.log(f(3, 4)); // 12
可以简写成:
(参数1, 参数2, …, 参数N) => 表达式(单一)
例如:
var f = (num1, num2) => num1*num2;
console.log(f(3, 4)); // 12
当只有一个参数时,圆括号是可省略的:
(单一参数) => {函数声明}
单一参数 => {函数声明}
例如:
var f = num => num*num;
console.log(f(3)); // 9
没有参数的函数应该写成一对圆括号:
() => {函数声明}
例如:
var f = () => 'hello world';
console.log(f()); // hello world
引入箭头函数有两个方面的作用:简化函数和不需要绑定 this
。
简化函数
我们使用 map
方法一次输出一个数组各元素的长度,使用以下方法:
var materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
var f = materials.map(function(material) {
return material.length;
});
console.log(f) // [8, 6, 7, 9]
使用箭头函数简化:
var f = materials.map(material => {
return material.length;
});
console.log(f) // [8, 6, 7, 9]
进一步简化:
var f = materials.map(material => material.length);
console.log(f) // [8, 6, 7, 9]
不绑定 this
在 ECMAScript 3/5中,通过将 this
值分配给封闭的变量,可以解决 this
问题。
function Person() {
this.age = 0;
var self = this;
setInterval(function growUp() {
self.age++;
console.log(self.age);
}, 1000);
}
var p = new Person();
使用箭头函数则不用绑定 this
:
function Person() {
this.age = 0;
// var self = this;
setInterval(() => {
this.age++;
console.log(this.age);
}, 1000);
}
var p = new Person();