arrow function
//基本样式,arrow之前是参数,arrow之后是函数体
x => x*x
//相当于下面的匿名函数
function(x){
return x*x;
}
arrow function的完整表达
//若函数体为多行,则return和{}不能省略
x => {
if (x > 0) {
return x * x;
}
else {
return - x * x;
}
}
//若参数为多个,则参数需要使用()
// 两个参数:
(x, y) => x * x + y * y
// 无参数:
() => 3.14
// 可变参数:
(x, y, ...rest) => {
var i, sum = x + y;
for (i=0; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}
//要返回一个对象,就要注意,如果是单表达式,这么写的话会报错
x => { foo: x } //SyntaxError, 因为和函数体的{ ... }有语法冲突
x => ({ foo: x }) //修正做法
arrow function中this的应用:this总是指向词法作用域,也就是外层调用者obj
//通常javascript写法
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined('use strict')
};
return fn();
}
};
//this在arrow function中的应用,this总是指向词法作用域,也就是外层调用者obj
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25
arrow function中apply和call的应用
//由于this在箭头函数中已经按照词法作用域绑定了
//所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略
var obj = {
birth: 1990,
getAge: function (year) {
var b = this.birth; // 1990
var fn = (y) => y - this.birth; // this.birth仍是1990
//会忽略{birth: 2000}, 变成{birthth: 2000}, {birth: 3000}, {}的结果都是一样
return fn.call({birth:2000}, year);
}
};
obj.getAge(2015); // 25
//若省略call()和apply()中的第一个参数,则会报错NaN
var obj = {
birth: 1990,
getAge: function (year) {
var b = this.birth; // 1990
var fn = (y) => y - this.birth; // this.birth仍是1990
//会忽略{birth: 2000}, 变成{birthth: 2000}, {birth: 3000}, {}的结果都是一样
return fn.call(year);
}
};
obj.getAge(2015); // 25