Perkenalan

Apakah Anda siap terjun ke dunia menyenangkan JavaScript dan belajar tentang kekuatan rahasia dari kata kunci “ini”? Persiapkan diri Anda untuk perjalanan luar biasa melalui dunia "ini" yang menarik, di mana Anda akan mengungkap penyebab tindakannya dan menyadari kekuatan penuh dari kode Anda. Dengan contoh-contoh yang menarik dan penjelasan yang sangat jelas, panduan ini akan membawa Anda dalam perjalanan yang mendebarkan melalui berbagai ikatan "ini". Anda akan diperlengkapi untuk menangani kesulitan pengkodean apa pun yang menghadang Anda saat perjalanan ini selesai, dan Anda akan memiliki keyakinan diri untuk membangun sistem yang tangguh dan dapat diskalakan. Jadi tanpa basa-basi lagi, kencangkan booting kode Anda, dan mari menjelajahi wilayah yang belum dipetakan dengan kata kunci "ini"!

Kata kunci "ini" dalam JavaScript mengacu pada objek yang merupakan metode dari fungsi saat ini. Ini adalah variabel cakupan dinamis, artinya cakupannya berubah tergantung pada konteks pemanggilan fungsi selama runtime. “ini” adalah kunci dan konsep yang sering disalahpahami dalam JavaScript karena artinya dapat bervariasi secara substansial berdasarkan konteks penggunaannya.

Ikatan "ini"

Kata kunci “ini” memiliki empat pengikatan utama dalam JavaScript: pengikatan default, pengikatan implisit, pengikatan eksplisit, dan pengikatan baru. Memahami pengikatan ini sangat penting untuk menggunakan kata kunci "ini" dalam JavaScript secara efektif karena masing-masing menentukan bagaimana "ini" harus digunakan dalam konteks tertentu.

1. Pengikatan Default

Ketika istilah "ini" digunakan di luar fungsi atau dalam lingkup global dalam JavaScript, itu terikat secara default. Dalam contoh ini, "ini" mengacu pada objek global, yang merupakan "jendela" di browser atau "global" di Node.js.

Berikut adalah contoh tindakan pengikatan default:

Seperti yang terlihat pada pernyataan console.log pertama, kata kunci “ini” dalam contoh di atas mengacu pada objek global saat digunakan di luar fungsi apa pun. Kalimat console.log kedua menunjukkan bahwa ketika digunakan di dalam fungsi logThis, itu juga merujuk ke objek global.

Sangat penting untuk diingat bahwa dalam mode ketat, objek global tidak terdefinisi dan bukan nilai "ini" dalam lingkup global. Anda dapat mengaktifkan mode ketat dengan menambahkan "gunakan ketat" di awal kode Anda atau di dalam fungsi seperti yang ditunjukkan di bawah ini.

2. Pengikatan Implisit

Kata kunci "ini" dalam pengikatan ini mengacu pada objek yang merupakan properti dari fungsi tersebut. "ini" menentukan objek ketika suatu fungsi digunakan sebagai metode suatu objek. Objek yang fungsinya adalah properti menentukan nilai "ini".

Ambil contoh,

Fungsi “ greet ” merupakan atribut dari objek “ person ” pada contoh di atas. Kita dapat mengakses properti nama objek “ person ” dengan memanggil person.greet(), yang menetapkan nilai this dalam metode sapaan ke objek person. Pengikatan implisit dapat dilihat dalam situasi ini. Pengikatan implisit diilustrasikan oleh ini.

Mari kita lihat contoh lain:

Dalam contoh ini, objek “ instruktur ” memiliki fungsi “ sayName ” yang disetel sebagai properti, dan ketika instruktur.say() dipanggil, objek “ instruktur ” disetel sebagai nilai “ ini ” dalam fungsi “ sayName ” . Ini adalah contoh lain dari pengikatan implisit.

3. Pengikatan Eksplisit

Tidak peduli bagaimana atau di mana suatu fungsi dipanggil dalam kode, Anda dapat secara eksplisit menetapkan nilai " this " untuk panggilan menggunakan metode pengikatan eksplisit.

Tiga metode pengikatan eksplisit ada di JavaScript: " call ", " apply ", dan " bind ".

Anda dapat memanggil fungsi menggunakan metode “ panggilan ”, dan Anda juga dapat menetapkan nilai “ ini ” untuk pemanggilan fungsi tersebut. Nilai yang ingin Anda setel untuk “ this ” adalah argumen pertama ke metode pemanggilan, dan argumen lainnya dikirim ke fungsi satu per satu.

Ambil contoh:

Metode “ panggilan ” digunakan dalam contoh di atas untuk memanggil fungsi “ sayName ” dan nilai “ ini ” disetel ke objek instruktur.

Mirip dengan " call " adalah metode " apply " kecuali bahwa ia menerima serangkaian argumen daripada argumen individual.

Mari kita lihat sebuah contoh:

Pada contoh di atas, metode “ apply ” digunakan untuk memanggil sayNamefungsi dan menetapkan nilai “ this ” ke objek “ instruktur ”. Argumen ke fungsi diteruskan sebagai larik.

Metode " bind " membuat fungsi baru menggunakan argumen pertama yang diteruskan ke "bind" sebagai nilai "ini". Argumen yang diberikan untuk "mengikat" ditetapkan sebagai nilai "ini" di dalam fungsi asli saat fungsi baru nanti dipanggil.

Berikut adalah contoh di bawah ini:

Pada contoh di atas, metode “ bind ” digunakan untuk membuat fungsi baru “ instrukturSayName ” menggunakan “ ini ” yang disetel ke objek “ instruktur ”. Saat fungsi “ instrukturSayName ” kemudian dipanggil, nilai “ ini ” di dalam fungsi “ sayName ” disetel ke objek “ instruktur ”, sama seperti jika kita menggunakan “ panggilan ” atau “ terapkan ”.

4. Pengikatan Baru

Proses di mana kata kunci " ini " terikat ke objek yang baru dibangun ketika suatu fungsi dipanggil dengan operator " baru " disebut sebagai pengikatan " baru ".

Ketika suatu fungsi dipanggil dengan operator " baru ", objek baru dibuat dan kata kunci " ini " di dalam fungsi diatur ke objek yang baru dibuat ini. Selain itu, prototipe dari objek yang baru dibuat diatur ke properti prototipe dari fungsi tersebut.

Ambil contoh:

Pada contoh di atas, objek baru dibuat dengan menggunakan operator “ new ” untuk memanggil fungsi “ Orang ”. Properti " nama " dan " salam " ditambahkan ke objek, dan kata kunci " ini " dalam fungsi " Orang " diatur ke objek yang baru dibuat.

Sangat penting untuk diingat bahwa objek yang baru dibuat dikembalikan tanpa memerlukan pernyataan "kembali" saat fungsi dipanggil menggunakan operator "baru". Jika pernyataan "return" digunakan dan mengembalikan objek, objek itu akan dikembalikan, bukan objek yang baru dibuat. Jika pernyataan "return" digunakan dan mengembalikan nilai non-objek, objek yang baru dibuat akan tetap dikembalikan.

Fungsi Panah dan "ini"

Fungsi panah JavaScript menyediakan jalan pintas untuk menulis fungsi anonim (fungsi tanpa nama). Cara mereka mengikat kata kunci "ini" membedakannya dari ekspresi fungsi konvensional.

Nilai "ini" dalam ekspresi fungsi konvensional bergantung pada bagaimana fungsi tersebut dipanggil. Seperti yang dijelaskan sebelumnya, ini dapat diatur secara eksplisit menggunakan perintah "panggil", "terapkan", atau "ikat", atau secara implisit diatur tergantung pada objek yang berisi fungsi tersebut.

Namun, dalam fungsi panah, konteks di mana fungsi panah dibuat, bukan cara pemanggilannya, yang menentukan nilai "ini". Artinya, jika fungsi panah tidak berada di dalam fungsi lain, kata kunci "ini" di dalam fungsi panah akan selalu mengacu pada nilai "ini" dari fungsi luar atau objek global.

Sederhananya, fungsi panah tidak memiliki nilai "ini" sendiri; sebaliknya, mereka mewarisi nilai "ini" dari cakupan terlampir.

Misalnya:

Berikut adalah contoh lain dari fungsi panah yang mengacu pada kata kunci “ini” dari fungsi luar:

Pada contoh di atas, fungsi “ sapaan ” pada contoh ini didefinisikan sebagai fungsi tanda panah di dalam fungsi “ Orang ”. Nilai " ini " dalam fungsi panah sesuai dengan nilai " ini " dari fungsi " Orang ", yang ditetapkan ke objek yang baru dibuat " elie ," saat fungsi " sapa " dipanggil.

Perlu disebutkan bahwa penggunaan "panggilan", "terapkan", atau "ikatan" tidak dapat mengubah pengikatan "ini" dalam fungsi panah. Terlepas dari metode yang digunakan untuk memanggil fungsi, nilai "ini" dalam fungsi panah tetap sama. Hal ini membuat fungsi panah sangat bermanfaat untuk callback dan event handler, di mana nilai "ini" sering berubah secara tidak terduga.

Kesimpulan

Kesimpulannya, mempelajari kata kunci "ini" JavaScript adalah langkah penting untuk menjadi ahli JavaScript sejati. Konsep penting namun sering membingungkan ini dapat membuat atau menghancurkan kode Anda dan merupakan kunci untuk memanfaatkan kemampuan penuh bahasa tersebut. Anda akan dapat menulis kode yang tidak hanya lebih efisien tetapi juga lebih elegan dan dinamis jika Anda memiliki pemahaman menyeluruh tentang pengikatan default, pengikatan implisit, pengikatan eksplisit, dan pengikatan baru, yang merupakan empat pengikatan dasar "ini" . Kemampuan untuk mengembangkan kode yang fleksibel, adaptif, dan dapat diskalakan yang dapat tumbuh dan berkembang seiring perubahan proyek dan persyaratan Anda akan memungkinkan Anda menghadapi tantangan apa pun yang menghadang Anda. Jadi, rangkul kata kunci "ini", kuasai, dan jadilah ninja JavaScript sejati!