Dalam tutorial ini, anda akan belajar mengenai kata kunci JavaScript ini dengan bantuan contoh.
Dalam JavaScript, thiskata kunci merujuk kepada objek di mana ia dipanggil.
1. Skop Global Di Dalam ini
Apabila thisdigunakan sendiri, thismerujuk kepada objek global ( windowobjek dalam penyemak imbas). 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 Dalam ini
Ketika thisdigunakan dalam fungsi, thismerujuk pada objek global ( windowobjek dalam penyemak imbas). Sebagai contoh,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. Fungsi Pembina Dalam ini
Dalam JavaScript, fungsi konstruktor digunakan untuk membuat objek. Apabila fungsi digunakan sebagai fungsi konstruktor, thismerujuk pada objek di dalamnya digunakan. Sebagai contoh,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Pengeluaran
Orang (nama: "Jack") Jack
Di sini, thismerujuk kepada objek person1. Itulah sebabnya, person1.namememberi kita Jack.
Catatan : Apabila thisdigunakan dengan kelas ES6, ini merujuk pada objek di dalamnya digunakan (mirip dengan fungsi konstruktor).
4. Kaedah Objek Dalam ini
Apabila thisdigunakan di dalam kaedah objek, thismerujuk pada objek yang berada di dalamnya. 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();
Pengeluaran
(nama: "Jack", umur: 25, salam: ƒ) Jack
Dalam contoh di atas, thismerujuk kepada personobjek.
5. Fungsi Inner Inner ini
Apabila anda mengakses thisfungsi dalaman (dalam kaedah), thismerujuk pada 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();
Pengeluaran
(nama: "Jack", umur: 25, salam: ƒ) 25 Tetingkap (…) tidak ditentukan
Di sini, thisbahagian dalam innerFunc()merujuk kepada objek global kerana innerFunc()terdapat dalam kaedah.
Namun, this.ageluaran innerFunc()merujuk kepada personobjek.
6. Fungsi Panah Dalam ini
Di dalam fungsi anak panah, thismerujuk kepada skop induk. Sebagai contoh,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Fungsi anak panah tidak ada yang tersendiri this. Apabila anda menggunakan thisfungsi anak panah, thismerujuk pada objek ruang 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 merujuk kepada greetobjek.
Anda juga dapat menggunakan fungsi anak panah untuk menyelesaikan masalah memiliki undefinedketika menggunakan fungsi di dalam suatu metode (seperti yang terlihat dalam 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();
Pengeluaran
(nama: "Jack", umur: 25, salam: ƒ) 25 (nama: "Jack", umur: 25, salam: ƒ) 25
Di sini, innerFunc()ditakrifkan menggunakan fungsi anak panah. Ia diambil thisdari skop induknya. Oleh itu, this.agememberi 25 .
Apabila fungsi anak panah digunakan this, ini merujuk pada ruang lingkup luar.
7. Fungsi Dalam ini dengan Mod Ketat
Apabila thisdigunakan dalam fungsi dengan mod ketat, thisadalah undefined. Sebagai contoh,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Catatan : Ketika menggunakan thisfungsi dalam 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
Apabila anda lulus thisdengan call()fungsi, greet()dianggap sebagai kaedah thisobjek (objek global dalam hal ini).
