首頁 > web前端 > js教程 > js中箭頭函數和普通函數的差別是什麼

js中箭頭函數和普通函數的差別是什麼

青灯夜游
發布: 2023-01-03 09:26:48
原創
10230 人瀏覽過

區別:箭頭函數是“=>”,普通函數是“function”。箭頭函數不能當作建構函數,不能使用new。箭頭函數不綁定arguments,但普通函數可以。箭頭函數中的this代表上層對象,普通函數中的this代表目前對象。

js中箭頭函數和普通函數的差別是什麼

本教學操作環境:windows7系統、ECMAScript 5版、Dell G3電腦。

普通函數在es5就有了,箭頭函數是es6中出現的函數形式,當然也可以繼續用普通函數。

普通函數大家知道:

形式基本上一致

js中箭頭函數和普通函數的差別是什麼

#來看看箭頭函數:

開發時根據實際情況可以省略一些東西

單條處理可以省略return和{大括號}

#單一參數可以省略(小括號)

js中箭頭函數和普通函數的差別是什麼
箭頭函數不能作為建構函數不能new。會報錯誤

js中箭頭函數和普通函數的差別是什麼

js中箭頭函數和普通函數的差別是什麼

箭頭函數不綁定arguments,但可使用…rest參數

這是普通函數arguments,可以使用

js中箭頭函數和普通函數的差別是什麼

js中箭頭函數和普通函數的差別是什麼

#這是箭頭函數的,用了會報錯。

js中箭頭函數和普通函數的差別是什麼

js中箭頭函數和普通函數的差別是什麼

但是可以這麼用,不過結果和arguments有所不同。

js中箭頭函數和普通函數的差別是什麼

js中箭頭函數和普通函數的差別是什麼

arguments的一般使用情境是:允許傳入3個參數,中間一個參數是可選。若只傳1個參就是參數1用,傳入2個參就是參數1、參數3用…

js中箭頭函數和普通函數的差別是什麼

rest參數使用效果:

js中箭頭函數和普通函數的差別是什麼

js中箭頭函數和普通函數的差別是什麼

# rest預設是[],多餘的傳參會加入陣列

這裡我們使用arguments來模擬rest效果看看:js中箭頭函數和普通函數的差別是什麼

js中箭頭函數和普通函數的差別是什麼

相關推薦:

JavaScript影片教學

2種函數的this代表不一樣:

f1是箭頭函數,this代表上層對象,若無自訂上層,則代表window。

f2是普通函數,this代表目前物件。

js中箭頭函數和普通函數的差別是什麼

箭頭函數的call()或apply()函數,不會影響this的代表物件:js中箭頭函數和普通函數的差別是什麼

b,c,d皆是普通函數,

b中的f是箭頭函數,所以內部的this代表上層obj,值為11

c中的f是箭頭函數,呼叫f的call()時不會影響內部的this,依然代表obj,值為11

js中箭頭函數和普通函數的差別是什麼d中的f是普通函數,this代表window,但是因為呼叫了f的call(m)變成了m,值為21

######這裡我們來提一下call函數:######call函數是每個函數都有的方法,用來改變普通函數內部的this指向的。 ###############箭頭函數沒有原型屬性:######prototype是普通函數用來取得原型物件的。 ###############總結:###

箭頭函數內的this指向上層對象,bind()、call()、apply()皆無法改變指向。

普通函數內的this執行呼叫其函數的物件。

更多程式相關知識,請造訪:程式設計入門! !

以上是js中箭頭函數和普通函數的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板