ES6中的箭头函数

ES6中的箭头函数

一、基本用法

var arrow = v => v;
var arrow2 = () => {do something};
var arrow3 = ({name,age}) => 'name:' + name + ' age:' + age;

• 等同于以下代码：

var arrow = function (v){
    return v;
};
var arrow2 = function (){
    do something;
}; 
function arrow3(person){
    return 'name:' + person.name + ' age:' + person.age;
};

• 使用箭头函数可以使得表达更加简洁，例如下面的例子:

//正常函数
[1,2,3].map(function (x){
    return x;
});

//箭头函数
[1,2,3].map(x => x);

二、注意事项

• 函数体内的this对象指的是定义时所在的对象，而不是使用时的对象;

• 箭头函数不可以当作构造函数，即不能使用new命令；

• 箭头函数没有arguments对象，只能用rest参数(…num)代替;

• 箭头函数不能使用yield命令，因此不能用作构造函数

其中，第一条很关键，来看看一下代码案例：

function foo(){
    setTimeout(()=>{
        console.log('id:',this.id);
    },1000);
}

var id = 20;
foo.call({id:40});

输出结果为：

id:40

• 上面的代码中， setTimeout 的参数是一个箭头函数，这个箭头函数的定义是在 foo函数生成时生效的，而它真正执行要等到 1000ms 后。 如果是普通函数，执行时 this 应该指向全局 对象 window， 这时应该输出 20 。 但是，箭头函数导致 this 总是指向函数定义生效时所在的对象（本例是｛ id : 40}）， 所以输出的是 40 。

通俗地说，箭头函数没有自己的this，往往指向的是外部的对象的this。无论箭头函数嵌套多少层，this都指向外部的对象