Bagaimanakah Saya Boleh Mengakses 'ini' Dengan Betul Di Dalam Panggilan Balik JavaScript?

Perkaitan ini dalam Panggilan Balik JavaScript

Dalam JavaScript, menggunakan kaedah contoh dalam panggilan balik pengendali acara boleh mengubah skop "ini" daripada yang dimaksudkan contoh kepada sumber yang menggunakan panggilan balik. Akibatnya, kod yang serupa dengan contoh di bawah sering digunakan:

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

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

Walaupun berfungsi, pendekatan ini mungkin kelihatan pelik. Adakah terdapat penyelesaian yang lebih optimum?

Memahami Penutupan dan Perkaitan "ini"

Isu ini mengatasi jQuery dan berpunca daripada pengendalian JavaScript untuk "ini" dan penutupan. Penutupan membenarkan fungsi bersarang mengakses pembolehubah yang ditakrifkan dalam fungsi lampiran, seperti yang digambarkan di bawah:

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!
  }
  ...
};

"Ini," walau bagaimanapun, berkelakuan berbeza. Tidak seperti pembolehubah biasa yang kekal malar dalam skop tertentu, "ini" boleh berbeza-beza secara dinamik merentas skop.

// 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!
  }
  ...
};

Penyelesaian: Menyamakan "ini"

Untuk memintas perkara ini cabaran, JavaScript membenarkan kami menetapkan "ini" kepada pembolehubah, pada asasnya menyalakannya. Ini membolehkan kami merujuk kepada objek yang dimaksudkan di seluruh fungsi bersarang.

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!
  }
  ...
};

Prinsip yang sama ini digunakan untuk pembolehubah pseudo lain seperti "argumen."

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses 'ini' Dengan Betul Di Dalam Panggilan Balik JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!