Penulis bahan, terjemahan yang kami terbitkan hari ini, mengatakan bahwa ketika ia bekerja di bidang akuntansi, istilah-istilah yang jelas digunakan di sana, artinya mudah ditemukan di kamus. Tetapi setelah mengambil pemrograman, dan, khususnya, JavaScript, ia mulai menemukan konsep-konsep seperti itu yang definisi tidak dapat lagi ditemukan dalam kamus. Misalnya, ini menyangkut kata kunci
this . Dia ingat saat dia bertemu dengan objek JS dan fungsi konstruktor yang menggunakan kata kunci ini, tapi itu tidak begitu mudah untuk mendapatkan arti sebenarnya. Dia percaya bahwa pemula lain menghadapi masalah yang sama, terutama mereka yang belum pernah bekerja dalam pemrograman sebelumnya. Mereka yang ingin belajar JavaScript harus berurusan dengan
this . Materi ini bertujuan membantu semua orang untuk membantu ini.
Apa ini
Saya memperhatikan definisi saya tentang
this .
This adalah kata kunci yang digunakan dalam JavaScript yang memiliki arti khusus, tergantung pada konteks di mana ia digunakan.
Alasan
this menyebabkan begitu banyak kebingungan bagi pemula adalah karena konteks perubahan
this tergantung pada penggunaannya.
This dapat dianggap sebagai kata kunci dinamis. Saya suka bagaimana konsep "konteks" diungkapkan dalam artikel
ini oleh Ryan Morr. Menurutnya, konteks selalu merupakan nilai dari
this , yang merujuk pada objek yang "memiliki" kode yang sedang dieksekusi. Namun, konteks yang berkaitan dengan
this tidak sama dengan konteks eksekusi.
Jadi, ketika kita menggunakan kata kunci
this , kita, pada kenyataannya, merujuk ke beberapa objek dengan bantuannya. Mari kita bicara tentang apa objek ini, setelah memeriksa beberapa contoh.
Situasi saat ini menunjuk ke objek jendela
Jika Anda mencoba mengakses
this di lingkup global, itu akan terikat pada konteks global, yaitu ke objek
window di browser.
Saat menggunakan fungsi yang tersedia dalam konteks global (ini membedakannya dari metode objek),
this di dalamnya akan menunjuk ke objek
window .
Coba jalankan kode ini, misalnya, di konsol browser:
console.log(this); // Window // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …} function myFunction() { console.log(this); } // myFunction(); // Window! // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …}
Menggunakan ini di dalam objek
Ketika
this digunakan di dalam suatu objek, kata kunci ini merujuk pada objek itu sendiri. Pertimbangkan sebuah contoh. Misalkan Anda membuat objek
dog dengan metode dan menyebutnya dalam salah satu metodenya. Ketika
this digunakan di dalam metode ini, kata kunci ini mewakili objek
dog .
var dog = { name: 'Chester', breed: 'beagle', intro: function(){ console.log(this); } }; dog.intro(); // dog // {name: "Chester", breed: "beagle", intro: ƒ} // breed:"beagle" // intro:ƒ () // name:"Chester" // __proto__:Object
Ini dan objek bersarang
Menerapkan
this dalam objek bersarang dapat membuat kebingungan. Dalam situasi seperti itu, perlu diingat bahwa kata kunci ini merujuk pada objek yang menggunakan metode ini. Pertimbangkan sebuah contoh.
var obj1 = { hello: function() { console.log('Hello world'); return this; }, obj2: { breed: 'dog', speak: function(){ console.log('woof!'); return this; } } }; console.log(obj1); console.log(obj1.hello()); // 'Hello world' obj1 console.log(obj1.obj2); console.log(obj1.obj2.speak()); // 'woof!' obj2
Fitur fungsi panah
Fungsi panah berperilaku berbeda dari fungsi biasa. Ingat: ketika mengakses
this dalam metode objek, kata kunci ini sesuai dengan objek yang dimiliki metode tersebut. Namun, ini tidak berlaku untuk fungsi panah. Sebaliknya,
this dalam fungsi-fungsi tersebut mengacu pada konteks global (objek
window ). Pertimbangkan kode berikut yang dapat dijalankan di konsol browser.
var objReg = { hello: function() { return this; } }; var objArrow = { hello: () => this }; objReg.hello();
Jika, bingung dengan masalah yang
dihadapi , lihat
MDN , Anda dapat menemukan informasi bahwa fungsi panah memiliki bentuk penulisan yang lebih pendek daripada ekspresi fungsional dan tidak terikat dengan entitas mereka sendiri seperti
this ,
arguments ,
super atau
new.target . Fungsi panah paling cocok untuk digunakan sebagai fungsi biasa, daripada metode objek, mereka tidak dapat digunakan sebagai konstruktor.
Kami akan mendengarkan MDN dan tidak akan menggunakan fungsi panah sebagai metode objek.
Menggunakan ini dalam fungsi biasa
Ketika fungsi reguler dalam lingkup global, kata kunci yang digunakan di dalamnya akan terikat ke objek
window . Berikut ini adalah contoh di mana fungsi
test dapat dilihat sebagai metode objek
window .
function test() { console.log('hello world'); console.log(this); } test();
Namun, jika fungsi dijalankan dalam mode ketat, maka
undefined akan ditulis dalam
hal ini , karena dalam mode ini binding standar dinonaktifkan. Coba jalankan contoh berikut di konsol browser.
function test() { 'use strict'; return this; } console.log( test() );
Memanggil ini dari fungsi yang dideklarasikan di luar objek dan kemudian ditetapkan sebagai metodenya
Perhatikan contoh objek
dog yang sudah kita ketahui. Sebagai metode objek ini, Anda dapat menetapkan fungsi
chase dideklarasikan di luarnya. Tidak ada metode dalam objek
dog , sampai kami membuat metode
foo , yang mana fungsi
chase ditugaskan. Jika sekarang Anda memanggil metode
dog.foo , fungsi
chase akan dipanggil. Kata kunci
this , yang diakses dalam fungsi ini, menunjuk ke objek
dog . Dan fungsi
chase , ketika Anda mencoba menyebutnya sebagai fungsi independen, akan berperilaku tidak benar, karena dengan pendekatan
this akan menunjuk ke objek global yang tidak memiliki properti yang kita, dalam fungsi ini, akses melalui
this .
var dog = { breed: 'Beagles', lovesToChase: 'rabbits' }; function chase() { console.log(this.breed + ' loves chasing ' + this.lovesToChase + '.'); } dog.foo = chase; dog.foo();
Kata kunci baru dan ini
Kata kunci
this digunakan dalam fungsi konstruktor yang digunakan untuk membuat objek, karena memungkinkan, secara universal, untuk bekerja dengan banyak objek yang dibuat menggunakan fungsi tersebut. JavaScript juga memiliki fungsi konstruktor standar yang, misalnya, Anda dapat membuat objek dengan tipe
Number atau
String . Fungsi serupa, ditentukan oleh programmer sendiri, memungkinkan dia untuk membuat objek yang komposisi properti dan metodenya diatur sendiri.
Seperti yang sudah Anda pahami, saya suka anjing, jadi kami akan menjelaskan fungsi konstruktor untuk membuat objek seperti
Dog yang berisi beberapa properti dan metode.
function Dog(breed, name, friends){ this.breed = breed; this.name = name; this.friends = friends; this.intro = function() { console.log(`Hi, my name is ${this.name} and I'm a ${this.breed}`); return this; }; }
Ketika fungsi konstruktor dipanggil menggunakan kata kunci
new ,
this di dalamnya menunjuk ke objek baru yang, menggunakan konstruktor, diberikan dengan properti dan metode.
Inilah cara bekerja dengan konstruktor JavaScript standar.
var str = new String('Hello world'); var str2 = 'Hello world';
Sekarang mari kita bekerja dengan fungsi konstruktor
Dog baru dibuat.
// Dog var chester = new Dog('beagle', 'Chester', ['Gracie', 'Josey', 'Barkley']); chester.intro(); // Hi, my name is Chester and I'm a beagle console.log(chester); // Dog {breed: "beagle", name: "Chester", friends: Array(3), intro: ƒ}
Berikut adalah contoh lain dari menggunakan fungsi konstruktor.
var City = function(city, state) { this.city = city || "Phoenix"; this.state = state || "AZ"; this.sentence = function() { console.log(`I live in ${this.city}, ${this.state}.`); }; }; var phoenix = new City();
Tentang pentingnya kata kunci baru
Saat memanggil fungsi konstruktor menggunakan kata kunci
new , kata kunci
this menunjuk ke objek baru yang, setelah beberapa pekerjaan di atasnya, akan dikembalikan dari fungsi ini. Kata kunci
this dalam situasi ini sangat penting. Mengapa Masalahnya adalah dengan bantuannya dimungkinkan, menggunakan fungsi konstruktor tunggal, untuk membuat banyak objek dari jenis yang sama.
Ini memungkinkan kami untuk skala aplikasi dan mengurangi duplikasi kode. Untuk memahami pentingnya mekanisme ini, pikirkan tentang bagaimana akun media sosial diatur. Setiap akun dapat menjadi instance dari objek yang dibuat menggunakan fungsi konstruktor
Friend . Setiap objek tersebut dapat diisi dengan informasi pengguna yang unik. Pertimbangkan kode berikut.
// - var Friend = function(name, password, interests, job){ this.fullName = name; this.password = password; this.interests = interests; this.job = job; }; function sayHello(){ // , , this // console.log(this); return `Hi, my name is ${this.fullName} and I'm a ${this.job}. Let's be friends!`; } // Friend, new var john = new Friend('John Smith', 'badpassword', ['hiking', 'biking', 'skiing'], 'teacher'); console.log(john); // greeting john john.greeting = sayHello; // console.log( john.greeting() ); // , sayHello() console.log( sayHello() ) ;
Ringkasan
Bahkan, penggunaan
this dalam JavaScript tidak terbatas pada contoh yang dijelaskan di atas. Jadi, serangkaian contoh ini dapat mencakup penggunaan fungsi
call ,
apply dan
bind . Karena materi ini ditujukan untuk pemula dan ditujukan untuk menjelaskan dasar-dasarnya, kami tidak menyinggung mereka di sini. Namun, jika Anda sekarang telah membentuk pemahaman awal tentang
this , maka Anda dapat dengan mudah mengetahui metode ini. Hal utama adalah untuk mengingat bahwa jika Anda tidak dapat memahami sesuatu pertama kali, jangan berhenti belajar, berlatih, membaca materi tentang topik yang Anda minati. Di salah satu dari mereka, Anda pasti akan menemukan sesuatu (semacam frase sukses, misalnya) yang akan membantu untuk memahami apa yang Anda tidak bisa mengerti sebelumnya.
Pembaca yang budiman! Pernahkah Anda kesulitan memahami kata kunci ini dalam JavaScript?