感觉自己对ES6的一些知识点,理解的还不是很透彻,就决定好好学习下一些相关知识,并分享出来,有不足之处,还望指出。敲黑板、划重点啦,这次分享的主角是箭头函数,作为一个新事物,也是有其两面性的。
箭头函数是什么?
使用箭头(=>)定义函数,因其使用起来便捷、代码整洁,备受coders喜爱。
var foo = v => v
#上面的箭头函数相当于
var foo = function(v) {
return v;
}
为什么要用箭头函数?
箭头函数的引入有两个方面的作用:
- 更简短的函数书写
- 对 this的词法解析
箭头函数注意事项
- 箭头函数没有this,或者说箭头函数不会改变this本来的绑定,由上下文确定,继承自外围作用域
在原型上使用箭头函数:
function A () {
this.foo = 1;
}
A.prototype.bar = () => console.log(this.foo);
let a = new A();
a.bar(); //undefined
一个经常犯的错误是使用箭头函数定义对象的方法
let a = {
foo: 1,
bar: () => console.log(this.foo)
}
a.bar(); // undefined
箭头函数中的this并不是指向a这个对象,对象a并不能构成一个作用域,所以再往上到达全局作用域,this就指向全局作用域。
- 箭头函数没有arguments,如果你能获取到arguments,那它一定是来自父作用域的。
function foo() {
return () => console.log(arguments[0])
}
foo(1, 2)(3, 4) // 1
适用于什么场景?
- 适用于无复杂逻辑或者无副作用的纯函数场景下,例如在map、filter的回调函数定义中
- 不要在最外层定义箭头函数,因为在函数内部操作this会很容易污染全局作用域。