Mengapa Gunakan \'var self = this\' dalam JavaScript?

Idiom JavaScript: Memahami "var self = this"

The "var self = this;" simpulan bahasa biasanya dilihat dalam kod JavaScript, terutamanya dalam pengendali acara. Ia membolehkan anda mengekalkan rujukan kepada objek asal "ini" dalam fungsi bersarang atau dalam penutupan pengendali acara.

Apabila anda mentakrifkan fungsi dalam pembina atau objek, konteks pelaksanaan berubah dan "ini" merujuk ke objek global (tetingkap) dalam mod tidak ketat. Dalam mod ketat, "ini" tidak akan ditentukan. Untuk mengelakkan perkara ini, pembangun menggunakan "var self = this" untuk mengekalkan rujukan kepada objek asal.

Mengapa Gunakan "var self = this"?

Pertimbangkan contoh berikut daripada Demo Nota Storan HTML5 SQL WebKit:

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

Dalam kod ini, "diri" ditugaskan kepada "ini" dalam pembina. Ini memastikan bahawa apabila pengendali acara dipanggil (cth. mengklik div 'nota'), "ini" masih akan merujuk kepada objek Nota asal, membenarkan kaedah seperti "onMouseDown" dipanggil dengan betul.

Adakah "var self = this" Biasa?

Ya, simpulan bahasa ini digunakan secara meluas dalam aplikasi JavaScript, terutamanya apabila berurusan dengan penutupan dan pengendali acara. Ia membolehkan pembangun mengekalkan rujukan kepada konteks asal dalam fungsi bersarang.

Pendekatan Alternatif

Walaupun "var self = this" berkesan, ia boleh mengelirukan untuk membaca. Pendekatan alternatif ialah menggunakan fungsi anak panah (diperkenalkan dalam ES6), yang mengekalkan pengikatan "ini" bagi konteks sekeliling.

Contohnya:

function Note() {
  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', (e) => { this.onMouseDown(e) });
  note.addEventListener('click', () => { this.onNoteClick() });
  this.note = note;
  // ...
}

Nota:

Kini tidak digalakkan untuk menggunakan "var self = this" kerana ia berpotensi menyebabkan ralat disebabkan kewujudan "window.self". Adalah disyorkan untuk menggunakan fungsi anak panah atau alternatif lain untuk mengekalkan pengikatan "ini".

Atas ialah kandungan terperinci Mengapa Gunakan \'var self = this\' dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!