Memahami Kata Kunci JavaScript "ini".

Apa artinya ini maksud kata kunci dalam JavaScript? Dan bagaimana Anda bisa menggunakannya secara praktis dalam program JavaScript Anda? Ini adalah beberapa pertanyaan umum yang ditanyakan oleh pemula dan bahkan beberapa pengembang JavaScript berpengalaman ini kata kunci.

Jika Anda salah satu pengembang yang bertanya-tanya apa itu ini tentang kata kunci, maka artikel ini cocok untuk Anda. Jelajahi apa ini mengacu pada konteks yang berbeda dan biasakan diri Anda dengan beberapa gotcha untuk menghindari kebingungan, dan tentu saja, bug dalam kode Anda.

"ini" Di Dalam Lingkup Global

Dalam konteks global, ini akan mengembalikan jendela objek selama itu berada di luar suatu fungsi. Konteks global berarti Anda tidak menempatkannya di dalam suatu fungsi.

if(true) {
console.log(this) // returns window object
}
let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
 i++
}

Jika Anda menjalankan kode di atas, Anda akan mendapatkan objek window.

Fungsi Dalam "ini" (Metode)

Saat digunakan di dalam fungsi, ini mengacu pada objek yang terikat dengan fungsi tersebut. Pengecualiannya adalah saat Anda menggunakan ini dalam fungsi mandiri, dalam hal ini ia mengembalikan jendela obyek. Mari kita lihat beberapa contoh.

Dalam contoh berikut, katakanNama fungsinya ada di dalam Saya objek (yaitu, itu adalah metode). Dalam kasus seperti ini, ini mengacu pada objek yang berisi fungsi.

 
functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley",
 sayName: sayName
}
console.log(me.sayName()) // My name is Kingsley

ini adalah Saya keberatan, begitu katanya nama ini di dalam katakanNama caranya sama persis dengan saya.nama.

Cara lain untuk memikirkannya adalah apa pun yang ada di sisi kiri fungsi saat dipanggil akan menjadi apa pun ini. Ini berarti Anda dapat menggunakan kembali katakanNama berfungsi pada objek yang berbeda dan ini akan mengacu pada konteks yang sangat berbeda setiap saat.

Sekarang, seperti disebutkan sebelumnya, ini mengembalikan jendela objek saat digunakan di dalam fungsi mandiri. Hal ini karena fungsi mandiri terikat pada jendela objek secara default:

functiontalk() {
returnthis
}
talk() // returns the window object

Panggilan bicara() sama dengan menelepon jendela.bicara(), dan apa pun yang ada di sisi kiri fungsi akan otomatis menjadi ini.

Sebagai catatan tambahan, ini kata kunci dalam fungsi berperilaku berbeda Mode ketat JavaScript (itu kembali belum diartikan). Hal ini juga perlu diingat ketika Anda menggunakan perpustakaan UI yang menggunakan mode ketat (misalnya React).

Menggunakan "ini" Dengan Function.bind()

Mungkin ada skenario di mana Anda tidak bisa menambahkan fungsi ke objek sebagai metode (seperti pada bagian terakhir).

Mungkin benda tersebut bukan milik Anda dan Anda mengambilnya dari perpustakaan. Objeknya tidak dapat diubah, jadi Anda tidak bisa mengubahnya begitu saja. Dalam kasus seperti ini, Anda masih dapat menjalankan pernyataan fungsi secara terpisah dari objek menggunakan Fungsi.mengikat() metode.

Dalam contoh berikut, katakanNama fungsi bukan metode di Saya objek, tetapi Anda masih mengikatnya menggunakan mengikat() fungsi:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk() // My name is Kingsley

Objek apa pun yang Anda lewati mengikat() akan digunakan sebagai nilai ini dalam panggilan fungsi itu.

Singkatnya, Anda dapat menggunakan mengikat() pada fungsi apa pun dan meneruskannya dalam konteks baru (objek). Dan benda itu akan menimpa maknanya ini di dalam fungsi itu.

Menggunakan "ini" Dengan Function.call()

Bagaimana jika Anda tidak ingin mengembalikan fungsi yang benar-benar baru, melainkan hanya memanggil fungsi tersebut setelah mengikatnya ke konteksnya? Solusi untuk itu adalah panggilan() metode:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
sayName.call(me) // My name is Kingsley

Itu panggilan() metode segera mengeksekusi fungsi tersebut alih-alih mengembalikan fungsi lain.

Jika fungsi memerlukan parameter, Anda dapat meneruskannya melalui panggilan() metode. Dalam contoh berikut, Anda meneruskan bahasa tersebut ke katakanNama() fungsi, sehingga Anda dapat menggunakannya untuk mengembalikan pesan yang berbeda secara kondisional:

functionsayName(lang) {
if (lang "en") {
return`My name is ${this.name}`
 } elseif (lang "it") {
return`Io sono ${this.name}`
 }
}
const me = {
 name: "Kingsley"
}
sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

Seperti yang Anda lihat, Anda bisa meneruskan parameter apa pun yang Anda inginkan ke fungsi tersebut sebagai argumen kedua ke panggilan() metode. Anda juga dapat meneruskan parameter sebanyak yang Anda inginkan.

Itu menerapkan() metodenya sangat mirip dengan panggilan() Dan mengikat(). Satu-satunya perbedaan adalah Anda menyampaikan beberapa argumen dengan memisahkannya menggunakan koma panggilan(), sedangkan Anda meneruskan beberapa argumen di dalam array dengan menerapkan().

Kesimpulan, ikat(), panggilan(), dan terapkan() semua memungkinkan Anda memanggil fungsi dengan objek yang benar-benar berbeda tanpa memiliki hubungan apa pun di antara keduanya (yaitu fungsi tersebut bukan metode pada objek).

"ini" Di Dalam Fungsi Konstruktor

Jika Anda memanggil suatu fungsi dengan a baru kata kunci, itu menciptakan a ini objek dan mengembalikannya:

functionperson(name){
this.name = name
}
const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name // Kingsley
her.name // Sarah
him.name // Jake

Pada kode di atas, Anda membuat tiga objek berbeda dari fungsi yang sama. Itu baru kata kunci secara otomatis membuat pengikatan antara objek yang sedang dibuat dan ini kata kunci di dalam fungsi.

"ini" Di Dalam Fungsi Panggilan Balik

Fungsi panggilan balik adalah berbeda dari fungsi biasa. Fungsi panggilan balik adalah fungsi yang Anda teruskan ke fungsi lain sebagai argumen, sehingga fungsi tersebut dapat dieksekusi segera setelah fungsi utama selesai dijalankan.

Itu ini kata kunci mengacu pada konteks yang sama sekali berbeda ketika digunakan di dalam fungsi panggilan balik:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the window object

Setelah satu detik menelepon orang fungsi konstruktor dan membuat yang baru Saya objek, itu akan mencatat objek jendela sebagai nilainya ini. Jadi ketika digunakan dalam fungsi panggilan balik, ini mengacu pada objek jendela dan bukan objek "dibangun".

Ada dua cara untuk memperbaikinya. Cara yang pertama adalah dengan menggunakan mengikat() untuk mengikat orang fungsi ke objek yang baru dibangun:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }.bind(this), 1000)
}
const me = new person("Kingsley") // returns the me object

Dengan modifikasi di atas, ini dalam panggilan balik akan menunjuk ke hal yang sama ini sebagai fungsi konstruktor (the Saya obyek).

Cara kedua untuk menyelesaikan masalah ini dalam fungsi panggilan balik adalah dengan menggunakan fungsi panah.

"ini" Fungsi Panah Dalam

Fungsi panah berbeda dengan fungsi biasa. Anda dapat menjadikan fungsi panggilan balik Anda sebagai fungsi panah. Dengan fungsi panah, Anda tidak perlu lagi mengikat() karena secara otomatis mengikat objek yang baru dibangun:

functionperson(name){
this.name = name
 setTimeout(() => {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the me object

Pelajari Lebih Lanjut Tentang JavaScript

Anda telah mempelajari semua tentang kata kunci "ini" dan apa artinya dalam semua konteks berbeda di JavaScript. Jika Anda baru mengenal JavaScript, Anda akan mendapat banyak manfaat dengan mempelajari semua dasar-dasar JavaScript dan cara kerjanya.