Bagaimana untuk Memastikan Skop Kaedah Contoh yang Betul dalam Pengendali Acara dalam JavaScript?

Memastikan Skop Kaedah Contoh yang Betul dalam Pengendali Acara: Amalan Terbaik

Dalam JavaScript, menggunakan kaedah contoh sebagai panggilan balik untuk pengendali acara memberikan cabaran skop. Pembolehubah ini boleh beralih daripada mewakili contoh objek kepada elemen yang mencetuskan panggilan balik. Untuk menangani perkara ini, pembangun sering menggunakan pendekatan berikut:

function MyObject() {
  this.doSomething = function() {
    ...
  }

  var self = this;
  $('#foobar').bind('click', function() {
    self.doSomething();
    // this.doSomething() would not work here
  })
}

Semasa ia berfungsi, kebimbangan mungkin timbul mengenai kebolehbacaan dan kecekapannya. Penyelesaian yang lebih elegan wujud yang memanfaatkan konsep penutupan.

Penutupan dan "Penyaluran" Pembolehubah

Penutupan membenarkan fungsi terbenam untuk mengakses pembolehubah yang ditakrifkan dalam skop induknya, dengan berkesan "menyalurkan"nya. Sebagai contoh, pertimbangkan contoh berikut:

var abc = 1; // we want to use this variable in embedded functions

function xyz() {
  console.log(abc); // it is available here!
  function qwe() {
    console.log(abc); // it is available here too!
  }
  ...
}

Walau bagaimanapun, teknik ini tidak berkesan untuk pembolehubah ini kerana ia boleh menukar skop secara dinamik:

// we want to use "this" variable in embedded functions

function xyz() {
  // "this" is different here!
  console.log(this); // not what we wanted!
  function qwe() {
    // "this" is different here too!
    console.log(this); // not what we wanted!
  }
  ...
}

Menetapkan Alias ​​untuk ini

Penyelesaian melibatkan pemberian alias kepada ini, mengekalkan nilainya dalam fungsi terbenam.

var abc = this; // we want to use this variable in embedded functions

function xyz() {
  // "this" is different here! --- but we don't care!
  console.log(abc); // now it is the right object!
  function qwe() {
    // "this" is different here too! --- but we don't care!
    console.log(abc); // it is the right object here too!
  }
  ...
}

Menggunakan teknik ini memastikan skop dan kejelasan yang betul dalam pengendali acara, menawarkan pendekatan yang lebih mantap dan boleh diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Skop Kaedah Contoh yang Betul dalam Pengendali Acara dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!