Penggunaan Kembali MetodeDengan metode call(), kita bisa menulis metode yang bisa digunakan pada objek yang berbeda. Show Semua Fungsi adalah MetodeDalam JavaScript, semua fungsi adalah metode objek. Jika suatu fungsi bukan metode dari objek JavaScript, itu adalah fungsi dari objek global (lihat bab sebelumnya). Contoh di bawah ini membuat objek dengan 3 properti, firstName, lastName, fullName. Contoh: <!DOCTYPE html> <html> <body> <h2>JavaScript Function</h2> <p> Contoh ini membuat objek dengan 3 properti (firstName, lastName, fullName). </p> <p> Properti fullName adalah sebuah metode: </p> <p id="demo"></p> <script> var myObject = { firstName:"John", lastName: "Doe", fullName: function() { return this.firstName + " " + this.lastName; } } x = myObject.fullName(); document.getElementById("demo").innerHTML = x; </script> </body> </html> Keyword thisDalam definisi fungsi, this mengacu pada “pemilik” fungsi. Dalam contoh di atas, this adalah objek person yang “memiliki” fungsi fullName. Dengan kata lain, this.firstName berarti properti firstName dari objek this. Metode call() JavaScriptMetode call() adalah metode JavaScript yang telah ditentukan sebelumnya. Dapat digunakan untuk memanggil metode dengan objek pemilik sebagai argumen (parameter). Dengan menggunakan call(), sebuah objek bisa menggunakan metode yang dimiliki oleh objek lain. Contoh ini menunjukan cara memanggil metode fullName person yang digunakan person1. Contoh: <!DOCTYPE html> <html> <body> <h2>JavaScript Function</h2> <p>Contoh ini memanggil metode fullName person yang digunakan person1.</p> <p id="demo"></p> <script> var person = { fullName: function() { return this.firstName + " " + this.lastName; } } var person1 = { firstName:"John", lastName: "Doe" } var person2 = { firstName:"Mary", lastName: "Doe" } var x = person.fullName.call(person1); document.getElementById("demo").innerHTML = x; </script> </body> </html> Contoh ini memanggil metode fullName person, yang digunakan di person2. Contoh: <!DOCTYPE html> <html> <body> <h2>JavaScript Functions</h2> <p>Contoh ini memanggil metode fullName person, yang digunakan di person2.</p> <p id="demo"></p> <script> var person = { fullName: function() { return this.firstName + " " + this.lastName; } } var person1 = { firstName:"John", lastName: "Doe" } var person2 = { firstName:"Mary", lastName: "Doe" } x = person.fullName.call(person2); document.getElementById("demo").innerHTML = x; </script> </body> </html> Metode call() dengan ArgumenMetode call() bisa menerima argumen. Contoh: <!DOCTYPE html> <html> <body> <h2>JavaScript Function</h2> <p>Contoh ini memanggil metode fullName person yang digunakan person1. </p> <p id="demo"></p> <script> var person = { fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } } var person1 = { firstName:"John", lastName: "Doe" } var person2 = { firstName:"Mary", lastName: "Doe" } var x = person.fullName.call(person1, "Oslo", "Norway"); document.getElementById("demo").innerHTML = x; </script> </body> </html> Call, apply, dan bind merupakan salah satu topik yang cukup sering ditanyakan saat interview. Jika kamu sedang mencari pekerjaan untuk role Javascript developer, entah itu Frontend atau Backend, wajib banget untuk memahami konsep ini. Untuk memahami method — method ini, ada 2 hal yang perlu di pahami Di Javascript semua adalah object termasuk function.Karna function adalah object maka pasti dong function memiliki property atau method bawaan. Oh iya buat yang belum familiar dengan object bisa baca tulisan tentang object di link berikut. Nah, berikut ini adalah property bawaan dari function. Property
Lebih jelasnya mengenai property — property ini, perhatikan contoh codenya dibawah ini. function add(a, b) {} Nah, berikut ini adalah method bawaan dari function.
function add(a, b){ Untuk penggunaan 3 method pertama akan dibahas dibawah. Yang penting sudah dapat pointnya bahwa di Javascript function adalah sebuah object yang memiliki property dan method bawaan. Keyword thisSederhananya keword this ini digunakan sebagai kata pengganti dari sebuah object. Ibarat orang, misal nama saya Yudi. Untuk mengatakan buku milikku, saya bisa bilang “buku Yudi”. Tapi dari pada saya mengulang menyebutkan nama saya, kalimat tersebut bisa di ganti menjadi “buku saya”. Lebih jelasnya perhatikan contoh codenya dibawah! const person = { Perhatikan return statement function fullName pada code diatas! Selain kita menggunakan nama objectnya(person), kita juga bisa menggunakan kata pengganti atau aliasnya menggunakan keyword “this”. Jadinya akan seperti ini, dan outputnya tetap sama. const person = { Keyword “this” ini mengacuh ke objectnya. Perlu di ingat bahwa “this” adalah sebuah keyword dan bukan variable, jadi nilainya tidak bisa di ubah. Sudah dari sononya :) Penggunaan method Call, Apply, dan BindSetelah memahami 2 konsep diatas, sekarang kita masuk ke inti dari tulisan ini. Method call, apply, dan bind digunakan untuk mengakses data dari object lain yang berbedah kontext. Misal seperti ini(sambil perhatikan codenya). Kita punya object dengan nama “myNum” dan sebuah fungsi “add”, kemudian di fungsi add kita ingin menggunakan data “num” dari “obj”. Hasilnya seperti yang kamu liat adalah NaN, hal ini karena fungsi add tidak mengenali “this.num”. Ingat bahwa keyword “this” mengacuh ke objectnya, dalam hal ini “this” di dalam function mengacuh ke function add bukan ke obj. const myNum= { num: 2}function add(a, b){ Nah, agar di fungsi add bisa mengakses dari dari object “myNum” kita bisa menggunakan method bawaan function yaitu call, apply, atau pun bind. call const myNum= { num: 2}function add(a, b){ apply cara kerja apply hampir sama seperti call, yang membedakan hanya pada cara passing argument functionnya. Kalau apply argumentnya dalam bentuk array const myNum= { num: 2}function add(a, b){ bind Cara kerja bind sedikit berbeda dari call dan apply, method bind akan mereturn function baru. Lebih jelasnya perhatikan contoh codenya berikut. const obj = { num: 2}function add(a, b){ Terima kasih telah membaca !Saya akan sangat berterimah kasih terhadap saran atau koreksi untuk membuat tulisan saya lebih baik kedepannya. Arigatō :) |