Salah satu konsep yang paling menantang dan sering digunakan dalam JavaScript adalah ' ini ” kata kunci. JavaScript menggunakan ' ini ” kata kunci yang berbeda dari bahasa lain. Namun, ini penting untuk membuat kode JavaScript yang lebih canggih. Sebagai seorang pemula, mungkin sulit bagi Anda untuk memahami penggunaan kata kunci yang disebutkan, tetapi jangan khawatir!
Postingan ini akan menjelaskan tentang “ ini ” kata kunci dan penggunaannya dalam JavaScript.
Apa itu 'ini' dalam JavaScript?
“ ini ” adalah kata kunci dalam JavaScript yang merujuk pada objek yang mengeksekusi blok kode yang ada. Ini mewakili objek yang menjalankan fungsi saat ini. Ini digunakan dalam beberapa skenario dengan cara yang berbeda, seperti:
-
- Dalam metode
- Dalam penanganan acara
- Dalam fungsi
Mari kita periksa masing-masing kegunaan yang disebutkan satu per satu!
Bagaimana Cara Menggunakan 'ini' dalam Metode JavaScript?
“ ini ” digunakan dalam metode JavaScript sebagai pengikatan implisit. Ketika fungsi dipanggil dengan bantuan objek dan titik, itu dianggap mengikat secara implisit, dan “ ini ” menunjukkan objek selama pemanggilan fungsi.
Contoh
Pertama, kita akan membuat objek dengan beberapa properti dan metode dan kemudian menggunakan ' ini ” kata kunci untuk mendapatkan nilai properti objek:
var personInfo = {
nama: 'Yohanes' ,
usia : dua puluh ,
informasi: fungsi ( ) {
console.log ( 'Hai! aku' + ini.nama + ' dan saya ' + this.age + ' tahun' ) ;
}
}
Selanjutnya, panggil ' info() ” metode bersama dengan nama objek:
Dapat dilihat bahwa nilai properti yang ditentukan dari objek saat ini berhasil ditampilkan:
Jika Anda ingin menggunakan ' ini ” dalam penanganan acara, ikuti bagian di bawah ini.
Bagaimana Cara Menggunakan 'ini' dalam Penanganan Acara JavaScript?
Dalam contoh ini, periksa penggunaan ' ini ” kata kunci dalam penanganan acara. Untuk ini, pertimbangkan contoh di mana kami akan menyembunyikan tombol kami dengan satu klik. Untuk melakukannya, buat tombol dan lampirkan ' klik() ” dengannya untuk mengakses properti style.display dengan “ ini ” kata kunci yang akan menyembunyikan tombol saat diklik:
< h3 > Klik untuk Menyembunyikan Tombol h3 >< tombol klik = 'this.style.display='none'' > Klik disini ! tombol >
Keluaran
Jika Anda bingung tentang penggunaan ' ini ” dalam fungsi yang ditentukan pengguna dalam JavaScript, ikuti bagian yang diberikan.
Bagaimana Cara Menggunakan 'ini' di Fungsi JavaScript?
Saat menggunakan “ ini ” dalam fungsi, ada tiga jenis binding dalam JavaScript, antara lain:
-
- Pengikatan default
- Pengikatan implisit
- Pengikatan eksplisit
Mari kita memahaminya satu per satu!
Contoh 1: Penggunaan kata kunci ini di Default Binding
Dalam penjilidan default, ' ini ” kata kunci bertindak sebagai objek global. Ini sebagian besar digunakan dalam fungsi mandiri.
Mari kita memahami konsep yang dinyatakan dengan sebuah contoh.
Pertama, kita akan membuat variabel “ x ” dan berikan nilai “ limabelas ”:
var x = limabelas ;
Kemudian, tentukan fungsi bernama “ fungsiDB() ” dan definisi fungsinya, buat variabel dengan nama yang sama “ x ” dan beri nilai “ 5 ”, kemudian, cetak nilainya menggunakan “ konsol.log() ” metode dengan “ ini ” kata kunci:
var x = 5 ;
console.log ( ini.x ) ;
}
Terakhir, panggil ' fungsiDB() ' fungsi:
Karena penggunaan “ ini ” kata kunci, output menampilkan nilai “ x ' sebagai ' limabelas ” karena bertindak sebagai objek global dan prosesnya disebut “ Pengikatan Dinamis ”:
Contoh 2: Penggunaan kata kunci ini dalam Pengikatan Implisit
Ketika fungsi dipanggil oleh objek atau simbol titik, “ ini ” kata kunci bertindak sebagai pengikatan implisit. Ini menunjukkan objek selama panggilan fungsi.
Dalam contoh ini, kita akan mendefinisikan sebuah fungsi “ info() ” dan gunakan “ ini ” kata kunci dalam definisi fungsi:
fungsi info ( ) {console.log ( 'Hai! aku' + ini.nama + ' dan saya ' + this.umur + ' tahun' )
}
Kemudian, buat objek bernama “ info orang ” dengan properti yang ditentukan:
nama: 'Yohanes' ,
usia : dua puluh ,
info: info
}
Sekarang, panggil fungsi di sepanjang objek:
Keluaran
Contoh 3: Penggunaan kata kunci ini dalam Pengikatan Eksplisit
Pengikatan eksplisit juga disebut “ mengikat keras ” karena fungsi tersebut secara paksa dipanggil untuk memanfaatkan objek tertentu untuk “ ini ” mengikat, tanpa meletakkan referensi fungsi properti pada objek. Untuk tujuan ini, metode call(), apply() dan bind() dapat digunakan.
Kami sekarang akan menggunakan fungsi yang sama bernama “ info() ” didefinisikan dalam contoh sebelumnya. Kemudian, buat objek bernama “ info orang ” dengan nilai sebagai berikut:
var personInfo = {nama: 'Yohanes' ,
usia : dua puluh
}
Untuk memanggil fungsi bernama “ info() ”, kita akan menggunakan “ panggilan() ” dan meneruskan objek yang dibuat sebagai argumen:
Karena info() bukan bagian dari objek, kami masih mengaksesnya secara eksplisit:
Untuk memanggil fungsi secara eksplisit, Anda juga dapat menggunakan metode apply() dan bind(). Metode apply() identik dengan metode call(), sedangkan metode bind() membuat fungsi baru dengan isi dan cakupan yang sama yang berperilaku dengan cara yang sama seperti fungsi aslinya. Metode bind() dapat digunakan untuk mengembalikan fungsi yang dapat Anda gunakan nanti.
Untuk memanggil info() dengan metode apply(), gunakan pernyataan berikut:
info.apply ( info orang ) ;
Ini memberikan output yang sama seperti yang diberikan oleh metode call():
Untuk menelepon “ info() ' dengan ' mengikat() ”, gunakan pernyataan yang diberikan:
Keluaran
Kami telah mengumpulkan semua informasi penting terkait dengan “ ini ” kata kunci.
Kesimpulan
“ ini ” adalah kata kunci dalam JavaScript yang merujuk pada objek yang mengeksekusi blok kode yang ada. Ini mewakili objek yang menjalankan fungsi saat ini. Ini digunakan dalam beberapa skenario dengan cara yang berbeda, termasuk metode, penanganan acara, dan fungsi. Dalam postingan ini, kami telah menjelaskan “ ini ” kata kunci dalam JavaScript.