[JavaScript] 函數原型最實用的 3 個方法 — call、apply、bind

Photo by Jonathan Klok on Unsplash

為什麼我們需要 apply / bind / call ?

按下F12在console執行一下

快用你那所向無敵的白金之星告訴我三者在幹嘛!

  • call、apply皆是回傳function執行結果
  • bind方法回傳的是綁定 this 後的原函數

來詳細說說call()的用法

fun.call(thisArg[, arg1[, arg2[, ...]]])

func( 1 , 2 , 3 ) vs func.call( null , 1 , 2 , 3 )

如果理解了上述用法,那麼apply()就只是一個shortcut

fun.apply(thisArg, [argsArray])

func( 1 , 2 , 3 ) vs func( null , [ 1 , 2 , 3 ] )

  • JavaScript 有一個神奇的東西叫做 arguments,這個變數引用了函數被呼叫時傳入的參數陣列,操作完的陣列不需解構就能apply回去。
雖然解構用起來兩者八成像 但解構竟是ES6的標準

看起來 call 與 apply 想解決的事情挺相似的 — 那麼 bind() 呢?

F12還不快按下去

用一個 Case 來討論你真的需要bind()嗎?

這是一個很常發生的例子

1. Self大法駕到 — this 的替身攻擊

  • 優點 是能解決問題 (哈哈 笑死)
  • 缺點 回調函數會與外層 self 緊耦合

2. Binding大法 — 綁定大法

3. Arrow Function — 箭頭通通給我指起來

JavaScript最神奇的地方在於,當你不想了解某個特性,你甚至可以放棄它,有完全不同的 pattern 可以讓你不需要用到這個不了解的特性。 — this

寫在最後

Bye~

--

--

--

If any interest, 👉 https://realdennis.me.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
realdennis

realdennis

If any interest, 👉 https://realdennis.me.

More from Medium

JavaScript Promise: The Ultimate Promise

Debounce in JavaScript

Difference Between var, let and const in JavaScript

I am Abhishek Ganesh Takale.