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都指向外部的对象