Kaedah untuk mengendalikan dengan betul ini menunjuk dalam penutupan JavaScript termasuk: 1. Gunakan fungsi anak panah, 2. Gunakan kaedah mengikat, 3. Gunakan pembolehubah untuk menyimpan ini. Kaedah ini memastikan bahawa fungsi intrinsik ini betul menunjuk kepada konteks fungsi luaran.

Pengenalan

Hari ini kita akan membincangkan masalah yang sering menyusahkan dalam perkembangan JavaScript: bagaimana untuk menangani dengan betul this dalam penutupan. Saya tahu bahawa banyak pemaju sering keliru apabila menghadapi masalah ini, tetapi jangan risau, saya akan membawa anda untuk menyelesaikan langkah misteri ini dengan langkah. Melalui artikel ini, anda akan belajar bagaimana untuk mengawal secara fleksibel this dalam penutupan dan menguasai beberapa petua praktikal dan amalan terbaik.

Semak pengetahuan asas

Dalam JavaScript, this adalah kata kunci yang sangat istimewa, dan penunjuknya akan berbeza mengikut konteks yang berbeza. Apabila kita bercakap mengenai penutupan, masalah menunjuk this menjadi sangat rumit. Penutupan adalah fungsi yang mempunyai kebenaran untuk mengakses pembolehubah dalam skop fungsi lain, biasanya dilaksanakan dengan menentukan fungsi lain di dalam fungsi.

Sebelum membincangkan penunjuk this , mari kita semak tingkah laku asas this :

• Dalam persekitaran global, this menunjukkan objek global ( window dalam penyemak imbas dan global dalam node.js).
• Apabila memanggil fungsi, arah this bergantung kepada kaedah memanggil fungsi, seperti panggilan langsung, panggilan melalui kaedah objek, panggilan menggunakan kaedah call atau apply , dll.

Selepas memahami asas-asas ini, kita dapat meneroka lebih mendalam bagaimana untuk this dengan betul.

Konsep teras atau analisis fungsi

Masalah menunjuk this dalam penutupan

Dalam penutupan, masalah yang ditunjuk oleh this adalah kerana fungsi dalaman this tidak disegerakkan dengan fungsi luar this . Mari lihat contoh mudah:

fungsi outerfunction () {
    this.name = 'oUter';
    fungsi innerfunction () {
        console.log (this.name); // Apakah perkara ini di sini?
    }
    InnerFunction ();
}
<p>const obj = {
Nama: 'Objek'
};</p><p> OUTERFUNCTION.CALL (OBJ); // output: Undefined</p>

Dalam contoh ini, this dalam innerFunction menunjuk kepada objek global, bukannya this outerFunction . Ini kerana dalam mod bukan tegas, this dalam fungsi dalaman menunjuk kepada objek global secara lalai.

Penyelesaian

Untuk mengendalikan penunjuk this dengan betul dalam penutupan, kita boleh menggunakan kaedah berikut:

Gunakan fungsi anak panah

Ciri penting fungsi anak panah ialah mereka tidak mempunyai this sendiri, tetapi mewarisi skop luar this . Ini menjadikan fungsi anak panah sangat berguna dalam penutupan:

fungsi outerfunction () {
    this.name = 'oUter';
    const innerfunction = () => {
        console.log (this.name); // Ini di sini menunjukkan perkara ini
    };
    InnerFunction ();
}
<p>const obj = {
Nama: 'Objek'
};</p><p> OUTERFUNCTION.CALL (OBJ); // output: luar</p>

Gunakan kaedah bind

Kaedah bind membolehkan kita membuat fungsi baru yang fungsi this terikat pada nilai yang ditentukan:

fungsi outerfunction () {
    this.name = 'oUter';
    fungsi innerfunction () {
        console.log (this.name);
    }
    innerfunction.bind (ini) ();
}
<p>const obj = {
Nama: 'Objek'
};</p><p> OUTERFUNCTION.CALL (OBJ); // output: luar</p>

Simpan this dengan pembolehubah

Satu lagi kaedah biasa adalah untuk menyelamatkan this dari fungsi luaran ke dalam pembolehubah dan kemudian gunakan pembolehubah ini dalam fungsi dalaman:

fungsi outerfunction () {
    this.name = 'oUter';
    const self = ini;
    fungsi innerfunction () {
        console.log (self.name);
    }
    InnerFunction ();
}
<p>const obj = {
Nama: 'Objek'
};</p><p> OUTERFUNCTION.CALL (OBJ); // output: luar</p>

Contoh penggunaan

Penggunaan asas

Mari kita lihat contoh aplikasi praktikal, katakan kita ingin membuat kelas kaunter, di mana kaedah digunakan dalam penutupan:

kaunter kelas {
    pembina () {
        this.count = 0;
    }
<pre class='brush:php;toolbar:false;'>kenaikan () {
    setTimeout (() => {
        this.count;
        console.log (this.count);
    }, 1000);
}

}

const counter = counter baru (); counter.increment (); // output selepas 1 saat: 1

Dalam contoh ini, kami menggunakan fungsi anak panah untuk memastikan titik this kepada contoh Counter .

Penggunaan lanjutan

Dalam senario yang lebih kompleks, kita mungkin perlu mengubah this secara dinamik dalam penutupan ini. Sebagai contoh, katakan kami mempunyai pengendali acara klik butang dan kami ingin mengemas kini status objek apabila diklik:

Kelas ButtonHandler {
    pembina (butang) {
        this.button = butang;
        this.clicks = 0;
        this.button.addeventListener ('klik', this.handleclick.bind (ini));
    }
<pre class='brush:php;toolbar:false;'>handleclick () {
    this.clicks;
    console.log (`Button diklik $ {this.clicks} times`);
}

}

const button = document.getElementById ('MyButton'); const handler = new ButtonHandler (butang);

Dalam contoh ini, kami menggunakan kaedah bind untuk memastikan this dalam kaedah handleClick menunjuk kepada contoh ButtonHandler .

Kesilapan biasa dan tip debugging

Kesalahan biasa apabila berurusan dengan penunjuk this dalam penutupan termasuk:

• Lupa menggunakan fungsi anak panah atau kaedah bind , menyebabkan this menunjuk kepada objek global.
• Dalam mod yang ketat, this dalam fungsi dalaman tidak akan undefined dan bukannya objek global.

Petua debug:

• Gunakan console.log(this) untuk mengeluarkan nilai this di lokasi yang berbeza untuk membantu anda memahami penunjuk this .
• Gunakan debugging Breakpoint dalam alat pembangunan untuk mengesan perubahan secara beransur -ansur dalam this .

Pengoptimuman prestasi dan amalan terbaik

Terdapat beberapa amalan terbaik yang perlu diperhatikan ketika berurusan dengan penunjuk this dalam penutupan:

• Gunakan fungsi anak panah : Fungsi anak panah tidak hanya dapat menyelesaikan masalah penunjuk this , tetapi juga membuat kod lebih ringkas.
• Elakkan terlalu banyak bind : Walaupun kaedah bind berfungsi, berlebihan meningkatkan penggunaan memori, kerana fungsi baru dibuat dengan setiap panggilan.
• Pastikan kod anda boleh dibaca : Apabila menggunakan penutupan, pastikan kod anda berstruktur dan baik supaya pemaju lain dapat memahami niat anda dengan mudah.

Perbandingan Prestasi

Mari bandingkan prestasi kaedah yang berbeza:

fungsi testArrowFunction () {
    const obj = {
        Nama: 'Ujian'
    };
    const func = () => {
        console.log (this.name);
    };
    untuk (biarkan i = 0; i <1000000; i) {
        func.call (obj);
    }
}
<p>fungsi testbindmethod () {
const obj = {
Nama: &#39;Ujian&#39;
};
fungsi func () {
console.log (this.name);
}
const boundfunc = func.bind (obj);
untuk (biarkan i = 0; i <1000000; i) {
boundfunc ();
}
}</p><p> fungsi testvariablemethod () {
const obj = {
Nama: &#39;Ujian&#39;
};
fungsi func () {
const self = ini;
fungsi kembali () {
console.log (self.name);
};
}
const inNerFunc = func.call (obj);
untuk (biarkan i = 0; i <1000000; i) {
innerfunc ();
}
}</p><p> konsol.time (&#39;fungsi anak panah&#39;);
testArrowFunction ();
Console.TimeEnd (&#39;Function Arrow&#39;);</p><p> Console.Time (&#39;Kaedah Bind&#39;);
testBindMethod ();
Console.TimeEnd (&#39;Kaedah Bind&#39;);</p><p> konsol.time (&#39;kaedah pembolehubah&#39;);
testvariablemethod ();
Console.TimeEnd (&#39;Kaedah Variabel&#39;);</p>

Jalankan kod ini dan anda akan mendapati bahawa prestasi fungsi anak panah biasanya adalah yang terbaik, kerana ia tidak memerlukan membuat contoh fungsi baru.

Melangkah ke titik lubang dan berfikir secara mendalam

Terdapat beberapa perangkap biasa yang perlu diperhatikan ketika berurusan dengan penunjuk this dalam penutupan:

• Batasan fungsi anak panah : Fungsi anak panah tidak boleh digunakan sebagai pembina kerana mereka tidak mempunyai this sendiri. Dalam senario di mana pembina diperlukan, anda perlu menggunakan definisi fungsi tradisional.
• Overhead kaedah bind : Walaupun kaedah bind dapat menyelesaikan masalah penunjuk this dengan berkesan, ia mewujudkan contoh fungsi baru, yang mungkin menjadi masalah dalam aplikasi sensitif prestasi.
• Pembolehubah menyelamatkan kerumitan this : Pendekatan ini, sementara berkesan, boleh menyebabkan pengurangan pembacaan kod dalam kod kompleks, sebagai pemahaman tambahan tentang peranan pembolehubah seperti self atau that .

Berfikir secara mendalam:

• Pilihan Corak Reka Bentuk : Apabila merancang kod, pertimbangkan untuk menggunakan corak reka bentuk seperti corak modul atau pelaksanaan segera ekspresi fungsi (IIFES), yang dapat membantu anda mengurus skop dengan lebih baik dan menunjuk this .
• Kesan mod ketat : Dalam mod yang ketat, tingkah laku lalai this akan berbeza -beza, dan memahami perbezaan ini dapat membantu anda menulis lebih banyak kod yang mantap.
• Kurikulasi Fungsi : Dalam sesetengah kes, kurikulasi fungsi dapat membantu anda mengurus penunjuk this dengan lebih baik sambil meningkatkan kebolehgunaan semula kod dan fleksibiliti.

Melalui kaedah dan teknik ini, anda boleh mengawal secara fleksibel dalam penutupan this dan menulis lebih cekap dan lebih mudah untuk mengekalkan kod JavaScript. Semoga artikel ini dapat membantu anda memahami dan menyelesaikan masalah penunjuk this dalam penutupan.

Atas ialah kandungan terperinci Bagaimana cara menangani dengan betul ini dalam penutupan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!