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
    原文作者:跑码
    原文地址: https://segmentfault.com/a/1190000009049611
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞