Rumah > hujung hadapan web > tutorial js > Memahami Kata Kunci `ini` dalam JavaScript

Memahami Kata Kunci `ini` dalam JavaScript

王林
Lepaskan: 2024-07-16 16:35:40
asal
746 orang telah melayarinya

Understanding the `this` Keyword in JavaScript

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.

Apakah ini?

Dalam JavaScript, ini merujuk kepada konteks di mana fungsi dilaksanakan. Ia menyediakan cara untuk mengakses sifat dan kaedah objek dari dalam objek itu sendiri.

Konteks Global

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
Salin selepas log masuk

Konteks Fungsi

Apabila digunakan di dalam fungsi, ini bergantung pada cara fungsi dipanggil.

Panggilan Fungsi Biasa

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)
Salin selepas log masuk

Panggilan Kaedah

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"
Salin selepas log masuk

Konteks Pembina

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"
Salin selepas log masuk

Fungsi Anak Panah

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)
Salin selepas log masuk

Pengendali Acara

Dalam pengendali acara, ini merujuk kepada elemen yang menerima acara.

document.getElementById('myButton').addEventListener('click', function() {
  console.log(this); // Logs the button element
});
Salin selepas log masuk

Pengikatan Eksplisit

JavaScript menyediakan kaedah untuk menetapkan nilai ini secara eksplisit menggunakan panggilan, gunakan dan ikat.

hubungi dan mohon

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"
Salin selepas log masuk

Perbezaan antara memanggil dan memohon ialah cara mereka mengendalikan hujah. call mengambil argumen secara individu, manakala apply mengambilnya sebagai tatasusunan.

mengikat

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"
Salin selepas log masuk

Kesimpulan

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan