箭头函数的副作用

一、前言

项目中，我习惯上能用箭头函数的地方都用箭头函数，这样我就不用随时操心this作用于的问题，而且对于书写上也很方便。也搜索过相关文章，里面也建议尽量使用箭头函数。当然，箭头函数也不是万能，肯定无法取代普通函数。
那么，究竟箭头函数需要注意哪些呢？

二、一些常见的问题

(代码在控制台测试）

1.作用域this的指向问题

this指向被创建的地方，或者是被实例化的地方；

• 对象方法，

let A = {
    a:'a',name:()=>console.log(this,this.a)
}
console.log(A);// S {a: "a", name: ƒ}
console.log(A.name());// 

• prototype的方法

function A(){
    this.a = "a";
}
A.prototype.name = ()=>console.log(this,this.a);
(new A).name();//Window,undefined，this.a 的this指向了window

• 动态上下文中的回调函数 click的回调

2. 无法被new，不能做构造函数

3. 需要获取arguments参数

三、性能问题

class F{
    f = ()=>{
        console.log('f');
    }
    fp(){
        console.log('fp');
    }
}

class B extends F{
    b = ()=>{
        console.log('f');
    }
        bp(){
        console.log('bp');
    }
}
let fc = new F();
let fc2 = new F();
let bc = new B();
console.log(fc,fc2,bc);
console.log(fc2.f == fc.f);//false
console.log(fc.f == bc.f);//false
console.log(fc.fp == bc.fp);//true

我们发现，f (箭头函数）并没有被继承下来，每次新建的时候都是一份copy。

四、总结
上文的第二部分《一些常见的问题》中的问题，并不能抵消箭头函数带来的便利性。相反，普通函数也有各种各样的问题。
虽然对于性能要求不是很高的场景，箭头函数的确提高了生产力，解放了我们思考 this 的时间，但对于性能要求比较高的场景，还是需要评估。

参考：
https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6#:~:text= Arrow functions should not be used%3A ,want to use named function as arrow... More

https://wesbos.com/arrow-function-no-no