箭头函数(arrow function)
箭头函数相当于一个匿名函数
x => x * x;
//同即是下面的匿名函数
//x - >传参
//x * x -> return
function(x) {
return x * x;
}
假如箭头函数含表达式就必须加{…} 和 return
x => {
if(x>10) {
return x + x;
}else {
return x * x;
}
}
假如箭头函数不是一个参数,参数就必须加()->(x,y)
//两个参数
(x,y) => x * y
//没有参数
() = > 1 + 4
//可变参数
var fn = (x,...rest) => {
for(var i = 0;i < rest.length; i++) {
x += rest[i]
}
return x;
}
//rest是个Array [4,5]
fn(1,4,5);//10
假如return的值是一个对象须要加()举行辨别,防备争执
var fn = x => { foo: x }
fn(3);//undefined
var fn = x => ({ foo: x })
fn(3);//Object {foo: 3}
箭头函数中的this由上下文决议
//es6 =>写法
var obj = {
age: 18,
fnc : function (x) {
var fn = x => this.age + x;//this->obj
return fn(x);
}
}
obj.fnc(5)//23
//es5写法
//毛病的写法
var obj = {
age: 18,
fnc : function (x) {
var fn = function (x) {
return this.age + x;//this->window
}
return fn(x);
}
}
obj.fnc(5)//NaN
//准确的写法
var obj = {
age: 18,
fnc : function (x) {
var that = this;//this->obj
var fn = function (x) {
return that.age + x;
}
return fn(x);
}
}
obj.fnc(5)//23
假如用call()或许apply()挪用箭头函数时,没法对this举行绑定(传入的第一个参数被疏忽):
var obj = {
age: 18,
fnc : function (x) {
var fn = x => this.age + x;//this->obj
return fn.call({age:20},x);//用call没法转变this的指向,箭头函数中的age依旧即是18
}
}
obj.fnc(5)//23