Dalam tutorial ini, Anda akan belajar tentang JavaScript dengan kata kunci ini dengan bantuan contoh.
Dalam JavaScript, thiskata kunci mengacu pada objek tempat ia dipanggil.
1. Inside Global Scope ini
Ketika thisdigunakan sendiri, thismengacu pada objek global ( windowobjek di browser). Sebagai contoh,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Di sini, this.namesama seperti window.name.
2. Fungsi Inside ini
Ketika thisdigunakan dalam suatu fungsi, thismengacu pada objek global ( windowobjek di browser). Sebagai contoh,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. Fungsi Pembuat Bagian Dalam ini
Dalam JavaScript, fungsi konstruktor digunakan untuk membuat objek. Ketika suatu fungsi digunakan sebagai fungsi konstruktor, thismengacu pada objek di dalamnya yang digunakan. Sebagai contoh,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Keluaran
Orang (nama: "Jack") Jack
Di sini, thismengacu pada objek person1. Itu sebabnya, person1.nameberi kami Jack.
Catatan : Saat thisdigunakan dengan kelas ES6, ini merujuk ke objek di dalamnya yang digunakan (mirip dengan fungsi konstruktor).
4. Metode Objek Di Dalam ini
Saat thisdigunakan di dalam metode objek, thismengacu pada objek tempatnya berada. Sebagai contoh,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.name); ) ) person.greet();
Keluaran
(nama: "Jack", umur: 25, salam: ƒ) Jack
Dalam contoh di atas, thismengacu pada personobjek.
5. Fungsi Inside Inner ini
Saat Anda mengakses thisdi dalam fungsi bagian dalam (di dalam metode), thismerujuk ke objek global. Sebagai contoh,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); // (name: "Jack", age… ) console.log(this.age); // 25 // inner function function innerFunc() ( // this refers to the global object console.log(this); // Window (… ) console.log(this.age); // undefined ) innerFunc(); ) ) person.greet();
Keluaran
(nama: "Jack", umur: 25, salam: ƒ) 25 Window (…) undefined
Di sini, thisinside innerFunc()mengacu pada objek global karena innerFunc()berada di dalam metode.
Namun, di this.ageluar innerFunc()mengacu pada personobjek.
6. Fungsi Panah Dalam ini
Di dalam fungsi panah, thismengacu pada lingkup induk. Sebagai contoh,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Fungsi panah tidak punya sendiri this. Saat Anda menggunakan thisdi dalam fungsi panah, thismerujuk ke objek lingkup induknya. Sebagai contoh,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Di sini, this.namedi dalam hi()fungsi mengacu pada greetobjek.
Anda juga dapat menggunakan fungsi panah untuk memecahkan masalah undefinedsaat menggunakan fungsi di dalam metode (seperti yang terlihat pada Contoh 5). Sebagai contoh,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.age); // inner function let innerFunc = () => ( // this refers to the global object console.log(this); console.log(this.age); ) innerFunc(); ) ) person.greet();
Keluaran
(nama: "Jack", usia: 25, salam: ƒ) 25 (nama: "Jack", usia: 25, salam: ƒ) 25
Di sini, innerFunc()didefinisikan menggunakan fungsi panah. Ini mengambil thisdari lingkup induknya. Karenanya, this.ageberikan 25 .
Saat fungsi panah digunakan dengan this, ini merujuk ke lingkup luar.
7. Fungsi Inside ini dengan Strict Mode
Saat thisdigunakan dalam fungsi dengan mode ketat, thisadalah undefined. Sebagai contoh,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Catatan : Saat menggunakan thisdi dalam fungsi dengan mode ketat, Anda dapat menggunakan panggilan Fungsi JavaScript ().
Sebagai contoh,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Ketika Anda meneruskan thisdengan call()fungsi tersebut, greet()diperlakukan sebagai metode thisobjek (objek global dalam kasus ini).
