一、前言
專案中，我習慣上能用箭頭函式的地方都用箭頭函式，這樣我就不用隨時操心this作用于的問題，而且對于書寫上也很方便，也搜索過相關文章，里面也建議盡量使用箭頭函式，當然，箭頭函式也不是萬能，肯定無法取代普通函式，
那么，究竟箭頭函式需要注意哪些呢？
二、一些常見的問題
(代碼在控制臺測驗）
1.作用域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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270895.html
標籤：其他