前端筆記（關於箭頭函數與普通函數的區別的理解）

大家都知道箭頭函數是es6新增的函數聲明方式，當然普通函數還是可以繼續使用的。我以前一直只知道箭頭函數只對this指向有影響，但是沒法說清楚具體有哪些影響，因此今天來總結整理一下。

1.普通函數的this指向當前調用者對象。箭頭函數的this指向其上下文

let obj={
    a:function(){
        console.log(this)//當前調用者
    },
    b:()=>{
        console.log(this)//上下文
    }
}
obj.a()
obj.b()

2.箭頭函數不能作為構造函數，所以也不能new，new就會報錯。普通函數可以

3.箭頭函數不能使用arguments，但可以使用…rest代替。rest參數也能在普通函數中使用，用於函數中傳遞不定參數

arguments是類數組，需要遍歷進行使用。arguments和rest都必須寫在最後面。

const A=(...a)=>{
    console.log(a)
}
A(1,2,3,4)//數組

const B=function(){
    console.log(arguments)
}
B(1,2,3,4)//類數組

4.箭頭函數沒有原型對象，普通函數有

//原型區別
const F=()=>{}
const G=function(){}
console.log(F.prototype)//undefined
console.log(G.prototype)//原型對象

拓展知識：

1.call、apply、bind可以改變普通函數this指向，無法改變箭頭函數的this指向

此處使用call後this就不是參數1的對象了，然後自動調用f函數。

apply：參數2傳的是數組。bind：重新綁定對象，生成新的函數，需要重新調用

//改變this指向
const f=function(a){
    console.log(this.name+a)
}
f()//undefined
f.call({name:1},2)//3

這個this還是代表上下文，不是那個對象

const F=()=>{
    console.log(this)
}
F.call({a:1})//window