Ashraf Latif

Back

2017-11-30

Fahami Asas .call(), .apply() & .bind() Javascript

Penggunaan function call, apply & bind adalah penting dalam JavaScript. Pada noob macam aku, untuk memahami bagaimana mana ia berfungsi sangatlah memeningkan. Aku ambil masa dalam beberapa minggu untuk memahami fungsi asas ni. Noob sangat kan? Ketiga-tiga function ini agak sama tapi digunakan pada situasi yang berbeza. Asasnya:

  • .call() & .apply() digunakan ketika kita mahu invoke(gunakan) secara serta merta
  • .bind() pula digunakan jika kita mahu panggil kemudian (tidak serta merta).

CALL()

Untuk terangkan dengan lebih jelas, sila rujuk kod dibawah ini.

var obj = { num: 2 }

var penambahan = function(arg) {
  return this.num + arg
}

Berdasarkan kod di atas, objek obj tidak memiliki method/function. Tapi dibawahnya ada aku ada declare function penambahan yang menerima satu argument (arg). Function penambahan ini akan return this.num + arg. Jika kita jalankan function penambahan(3), function itu TIDAK akan return 5 sebaliknya ia akan return NaN. Ini kerana this.num adalah undefined kerana ia merujuk kepada variable num yang tidak pernah kita declare sebelumnya dan tidak merujuk kepada num di dalam obj diatas. Jadi bagaimana kita hendak rujuk num yang ada pada obj ? Di sini hero .call() datang membantu!

penambahan.call(obj, 3)

Dengan menggunakan function .call(), kini this.num merujuk num pada obj. Function call menerima 2 parameter; .call( Argument 1, Argument 2) :

  • Argument 1 – objek yang kita mahu rujuk (dalam kes ini adalah obj )
  • Argument 2 – parameter arg pada function yang dipanggil

Kod penuh adalah seperti berikut

var obj = { num: 2 }

var penambahan = function(arg) {
  return this.num + arg
}

console.log(penambahan.call(obj, 3)) // return 5

Contoh la argument function lebih dari satu.

var obj = { num: 2 }

var penambahan = function(arg1, arg2, arg3) {
  return this.num + arg1 + arg2 + arg3
}

console.log(penambahan.call(obj, 2, 4, 6)) // return 14

Penggunaan function ini juga sangat membantu kita memperoleh konsep Don’t Repeat Yourself (DRY) di dalam kod kita. Misalnya kita mahu gunakan method/function yang sama tapi dengan argument atau objek lain. kita hanya perlu panggil objek baharu tersebut.

var obj = { num: 2 }

var penambahan = function(arg1, arg2, arg3) {
  return this.num + arg1 + arg2 + arg3
}

console.log(penambahan.call(obj, 2, 4, 6)) // return 14

var newObj = { num: 354 }

console.log(penambahan.call(newObj, 1, 2, 3)) // return 351

APPLY()

Function apply() adalah hampir sama seperti call(). Bezanya hanyalah apply menerima Argument 2 sebagai array. Kita ambil contoh di atas:

var obj = { num: 2 }

var penambahan = function(arg1, arg2, arg3) {
  return this.num + arg1 + arg2 + arg3
}

console.log(penambahan.apply(obj, [1, 2, 3])) // return 8

var arr = [7, 8, 9]

console.log(penambahan.apply(obj, arr)) // return 26

BIND()

Function ini digunakan untuk ‘menyimpan’ terlebih dahulu akan dipanggil semula kemudian. Sudah tentulah penggunaannya juga berbeza. Jika kita cuba gunakan bind() seperti ko diatas:

console.log(penambahan.bind(obj, 7, 8, 9)) // return function () { [native code] }

Ya, jika bind() digunakan seperti di atas, function ini akan return kembali sebuah function. Disebabkan bind() digunakan untuk ‘menyimpan’ terlebih dahulu untuk di panggil kemudian, jadi ia boleh disimpan didalam variable atau declared function.

var obj = { num: 2 }

var penambahan = function(arg1, arg2, arg3) {
  return this.num + arg1 + arg2 + arg3
}

var bound = penambahan.bind(obj)

console.log(bound(7, 8, 9)) // return 27

Kod di atas menunjukkan kita bind function penambahan() dengan objek obj yang kita mahukan terlebih dahulu dan simpan di dalam declared function bound(). Lihat function . bind() hanya perlukan 1 argument .bind( argument ) iaitu objek yang kita mahu bind.

Inilah asas function yang sering digunakan di dalam JavaScript functional programming. Sebenarnya ini hanyalah asas. Terdapat penggunaan lebih advance function ini yang mungkin akan aku kongsikan pada post yang lain.