es6中的箭头函数

箭头函数（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