1、基本用法
在ES6中允许使用箭头()=>来定义函数。
var f = v => v;
//等同于
var f = function(v) {
return v;
};
如果函数不需要参数或者需要多个参数就使用圆括号来代替。
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
箭头函数可以与解构赋值同时使用。
const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
return person.first + ' ' + person.last;
}
箭头函数可以简化函数代码,尤其是回调函数的简化。
// 正常函数写法
[1,2,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);
2、使用时注意事项
1)函数中的this是定义函数时的this,而不是使用函数时的this,也就是说箭头函数中的this是固定的。
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
上面的例子中,使用了箭头函数,this指向foo而不是window。
根据这一特性我们可以用来封装回调函数。
2)不可以当作构造函数,也就是说,不可以使用new命令,否则会报错。由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。
箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(call、apply、bind)。但是,箭头函数并不适用于所有场合,所以ES7提出了“函数绑定”(function bind)运算符,用来取代call、apply、bind调用。虽然该语法还是ES7的一个提案,但是Babel转码器已经支持。函数绑定运算符是并排的两个冒号(::),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即this对象),绑定到右边的函数上面。