基本用法
es6中用箭头定义匿名函数
var f = v => v
相当于es5
var f = function(v){
return v;
}
注意,如果箭头函数的代码块多于一句,箭头后面的返回值就要用大括号包起来,并显式写上return
var f = (num1, num2) => {
return num1 + num2
}
相当于es5
var f = function(num1, num2){
return num1 + num2;
}
如果不需要带参数,用一个括号代表参数部分
var f = () => v
注意,由于箭头后的第一个大括号被解析成代码块,所以如果匿名函数返回一个对象,应该用括号括起来
var f = () => ({ name: 'sysuzhyupeng', age: 24 })
箭头函数可以与解构一起使用
const full = ({ first, last }) => first + ' ' + last;
//equals
const full = function(person) {
return person.first + ' ' + person.last;
}
full({first: 1, last: 5}) // '1 5'
箭头函数让函数表达更简洁
const isEven = n => n % 2 == 0;
const square = n => n * n;
箭头函数另一个用处是简化回调函数
var newArr = arr.sort(function(a, b){
return a - b;
})
//es6
var newArr = arr.sort((a, b) => a - b);
另一个例子
[1, 2, 3].map(function(x){
return x * x;
})
//es6
[1, 2, 3].map( x => x * x);
使用注意点
- 函数体内的this对象,就是定义时的this对象,而不是运行时的调用对象。所以箭头函数自带绑定this,在很多地方可以用到。
- 不可以使用arguments对象,该对象在函数体内不存在
function foo(){
setTimeout(() => {
//return不妨碍尾调用
console.log(this.id)
}, 100);
}
var id = 1;
//setTimeout回调中定义的上下文是foo函数,而在事件队列中运行时的上下文是window,所以这里foo的上下文被改变之后,箭头函数定义的回调也同时被改变
foo.call({ id: 2 }) // 2
如果是正常的运行时绑定,现在调用的对象是{ id: 2},应该输出2。然而箭头函数绑定了定义时的对象,也就是window,所以输出1,当然严格模式下会输出undefined。
this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。
//实际上是这样的
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
嵌套的箭头函数
箭头函数内部,还可以再嵌套箭头函数,下面是一个es5的多重嵌套函数
function insert(){
return {info: function(array){
return {after: function(afterValue){
array.splice(array.indexOf(afterValue) + 1, 0, value);
return array;
}}
}}
}
insert(2).into([1, 3]).after(1); //[1, 2, 3]
这个函数可以由箭头函数改写
function insert(() => ({ info: (value) => ({ after: (afterValue)=>{
array.splice(array.indexOf(afterValue) + 1, 0, value);
return array;
}})})
es7的绑定符
ES7提出了“函数绑定”(function bind)运算符,用来取代call、apply、bind调用。虽然该语法还是ES7的一个提案,但是Babel转码器已经支持。
函数绑定运算符是并排的两个双冒号(::),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即this对象),绑定到右边的函数上面。
foo::bar;
// 等同于
bar.bind(foo);
foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);