Kata kunci dalam JavaScript ini boleh menjadi salah satu konsep yang paling mengelirukan untuk pembangun baharu. Nilainya boleh berubah bergantung pada tempat ia digunakan, menjadikannya penting untuk memahami tingkah lakunya dalam konteks yang berbeza. Artikel ini akan mentafsirkan kata kunci ini dengan meneroka penggunaannya dalam pelbagai senario.
Dalam JavaScript, ini merujuk kepada konteks di mana fungsi dilaksanakan. Ia menyediakan cara untuk mengakses sifat dan kaedah objek dari dalam objek itu sendiri.
Apabila digunakan dalam konteks global (di luar mana-mana fungsi atau objek), ini merujuk kepada objek global. Dalam pelayar web, objek global ialah tetingkap.
console.log(this); // In a browser, this will log the window object
Apabila digunakan di dalam fungsi, ini bergantung pada cara fungsi dipanggil.
Dalam panggilan fungsi biasa, ini merujuk kepada objek global (atau tidak ditentukan dalam mod ketat).
function showThis() { console.log(this); } showThis(); // Logs window (or undefined in strict mode)
Apabila fungsi dipanggil sebagai kaedah objek, ini merujuk kepada objek itu sendiri.
const person = { name: 'Alice', greet: function() { console.log(this.name); } }; person.greet(); // Logs "Alice"
Apabila fungsi digunakan sebagai pembina dengan kata kunci baharu, ini merujuk kepada contoh yang baru dibuat.
function Person(name) { this.name = name; } const bob = new Person('Bob'); console.log(bob.name); // Logs "Bob"
Fungsi anak panah mempunyai tingkah laku yang berbeza. Mereka tidak mempunyai konteks ini sendiri; sebaliknya, mereka mewarisi ini daripada konteks leksikal sekeliling.
const obj = { name: 'Carol', regularFunction: function() { console.log(this.name); }, arrowFunction: () => { console.log(this.name); } }; obj.regularFunction(); // Logs "Carol" obj.arrowFunction(); // Logs undefined (or the global object in non-strict mode)
Dalam pengendali acara, ini merujuk kepada elemen yang menerima acara.
document.getElementById('myButton').addEventListener('click', function() { console.log(this); // Logs the button element });
JavaScript menyediakan kaedah untuk menetapkan nilai ini secara eksplisit menggunakan panggilan, gunakan dan ikat.
Kaedah panggilan dan guna membolehkan anda menggunakan fungsi dengan nilai ini yang ditentukan.
function introduce() { console.log(`Hello, my name is ${this.name}`); } const person = { name: 'Dave' }; introduce.call(person); // Logs "Hello, my name is Dave" introduce.apply(person); // Logs "Hello, my name is Dave"
Perbezaan antara memanggil dan memohon ialah cara mereka mengendalikan hujah. call mengambil argumen secara individu, manakala apply mengambilnya sebagai tatasusunan.
Kaedah bind mencipta fungsi baharu yang, apabila dipanggil, menetapkan nilai ini kepada nilai yang disediakan.
function introduce() { console.log(`Hello, my name is ${this.name}`); } const person = { name: 'Eve' }; const boundIntroduce = introduce.bind(person); boundIntroduce(); // Logs "Hello, my name is Eve"
Memahami kata kunci ini adalah penting untuk menguasai JavaScript. Dengan mengenali cara ini berkelakuan dalam konteks yang berbeza, anda boleh menulis kod yang lebih boleh diramal dan boleh diselenggara. Sama ada anda menggunakan kaedah, pembina atau fungsi anak panah, mengetahui cara ini beroperasi akan membantu anda mengelakkan perangkap biasa dan memanfaatkan kuasanya dengan berkesan.
Atas ialah kandungan terperinci Memahami Kata Kunci `ini` dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!