Menguasai Kata Kunci &#this' dalam JavaScript

Kata kunci ini dalam JavaScript boleh menjadi agak rumit jika tidak difahami. Ini adalah salah satu perkara yang walaupun pembangun berpengalaman sukar untuk memahami dengan mudah tetapi apabila anda melakukannya, ia boleh menjimatkan banyak masa anda.

Dalam artikel ini, kita akan melihat apa itu, cara ia berfungsi dalam situasi yang berbeza dan kesilapan biasa yang anda tidak sepatutnya mengalami semasa menggunakannya.

Memahami ini dalam JavaScript

ini hanya merujuk kepada objek yang sedang digunakan dalam kod javascript. Tetapi inilah bahagian yang sukar: perkara yang dirujuk ini juga boleh berubah bergantung pada tempat dan cara anda menggunakannya dalam kod anda. seseorang mungkin bertanya "mengapa begitu?" Nah, ini bersifat dinamik =, bermakna - nilainya ditentukan apabila fungsi dipanggil, bukan apabila ia ditulis.

ini dalam Konteks Global dan Fungsi

Apabila anda menggunakan ini dalam konteks global, ia sering merujuk kepada objek global, yang agak masuk akal bukan? Jadi, jika anda hanya menaip ini dalam konsol penyemak imbas anda, ia akan menghala ke tetingkap.

Walaupun apabila digunakan di dalam fungsi, ia berkelakuan agak berbeza. Contohnya: jika anda memanggil fungsi "myFunction" sebagai contoh, ini akan tetap menghala ke objek global tetapi jika anda menggunakan mod ketat dalam Javascript, ia akan menjadikannya tidak ditentukan dalam fungsi itu.

Ya, saya tahu ia agak mengelirukan, ikut sahaja. Saya akan terangkan dengan lebih baik.

ini dalam Objek

Apabila anda menggunakan ini di dalam kaedah (fungsi yang merupakan sifat objek), ini merujuk kepada objek yang dimiliki oleh kaedah tersebut.

Contoh:

const myObject = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);
    }
};

myObject.greet(); // Output: 'Alice'

Di sini, this.name merujuk kepada myObject.name, iaitu 'Alice'.

ini dalam Pembina dan Kelas

Pembina: Apabila anda mencipta objek menggunakan fungsi pembina atau kelas, ini merujuk kepada objek baharu yang dicipta.

Contoh:

function Person(name) {
    this.name = name;
}

const person1 = new Person('Bob');
console.log(person1.name); // Output: 'Bob'

Dalam kod, this.name merujuk kepada sifat nama objek Orang baharu.

Kesilapan Biasa dan Cara Mengelakkannya

Satu kesilapan biasa dengan ini ialah kehilangan nilai yang betul dalam panggilan balik atau pengendali acara. Sebagai contoh, jika anda menghantar kaedah daripada objek sebagai panggilan balik, ini mungkin tidak merujuk kepada objek lagi.

Penyelesaian: Untuk mengelakkan ini, anda boleh menggunakan fungsi anak panah atau mengikat untuk memastikan ini menghala ke objek yang betul.

const myObject = {
    name: 'Eve',
    greet: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

myObject.greet(); // Output: 'Eve'

Kesimpulan

Kata kunci ini boleh menyusahkan, tetapi apa yang anda perlu ambil perhatian ialah ia berubah bergantung pada cara dan tempat anda memilih untuk memanggilnya. Untuk menjadi lebih baik, gunakannya untuk berlatih dengan banyak contoh, dan tanpa masa, anda akan menjadi profesional dengannya.

Atas ialah kandungan terperinci Menguasai Kata Kunci &#this' dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!