loading...

บันทึกการใช้งาน call, apply, bind มันแตกต่างกันยังงัยนะ

ilumin profile image Teerasak Vichadee ・1 min read

สมมุติว่าเรามี

const action = () => {}

เราจะใช้งานมันได้ 4 วิธี

1. ง่ายที่สุดเรียกมันตรงๆ

action()

2. ใช้ call()

action.call(obj, a, b, c)

call จะพิเศษกว่าการเรียกธรรมดา ตรงที่เราสามารถเอาค่าใน obj ไปใช้ใน action ได้ผ่าน "this"
เช่น

const obj = { name: 'ilumin' } 
const action = (a, b) => console.log(`Hello, ${this.name}, this is ${a} and ${b}.`)
action.call(obj, 'Anakin', 'Obiwan') // log: Hello, ilumin, this is Anakin and Obiwan.

3. ใช้ apply

action.apply(obj, args)

จริงๆแล้ว apply ก็เหมือน call เลย แต่พิเศษกว่าตรงที่มันรองรับการใส่ args เป็น array แต่ call ต้องเอาให้ชัวร์ว่ามีกี่ args เช่น

const obj = { name: 'ilumin' } 
const action = (a, b) => console.log(`Hello, ${this.name}, this is ${a} and ${b}.`)
action.call(obj, ['Anakin', 'Obiwan']) // log: Hello, ilumin, this is Anakin and Obiwan.

4. ใช้ bind

bind ถือว่าเป็นท่าที่เทพสุด เพราะเป็นการสร้าง function เอาไว้ใช้งานทีหลัง เช่น

const obj = { name: 'ilumin' } 
const action = (a, b) => console.log(`Hello, ${this.name}, this is ${a} and ${b}.`)
const bindedAction = action.bind(obj)
bindedAction('Anakin', 'Obiwan') // log: Hello, ilumin, this is Anakin and Obiwan.

ไม่มีกฏตายตัวว่าอะไรดีที่สุด ทั้งหมดขึ้นอยู่กับบริบทของโค้ด เลือกเอาไปใช้อย่างมีสติ และตั้งมั่นอยู่บนความง่าย สะดวก สะอาด และประหยัด :D

Discussion

markdown guide