ES6之箭头函数

感觉自己对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会很容易污染全局作用域。

你可能感兴趣的:(ES6之箭头函数)