var diri = ini?

Menggunakan metode instan sebagai panggilan balik untuk penangan acara mengubah ruang lingkup thisdari "Contoh saya" menjadi "Apa pun yang disebut dengan panggilan balik" . Jadi kode saya terlihat seperti ini

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

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

Ini bekerja, tetapi apakah itu cara terbaik untuk melakukannya? Itu terlihat aneh bagiku.

Pertanyaan ini tidak khusus untuk jQuery, tetapi khusus untuk JavaScript secara umum. Masalah intinya adalah bagaimana "menyalurkan" variabel dalam fungsi yang disematkan. Ini adalah contohnya:

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

Teknik ini bergantung pada penggunaan penutupan. Tapi itu tidak berfungsi thiskarena thismerupakan variabel pseudo yang dapat berubah dari cakupan ke lingkup secara dinamis:

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

Apa yang bisa kita lakukan? Tetapkan ke beberapa variabel dan gunakan melalui alias:

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

thistidak unik dalam hal ini: argumentsadalah variabel pseudo lain yang harus diperlakukan dengan cara yang sama - dengan alias.

Ya, ini tampaknya menjadi standar umum. Beberapa coders menggunakan diri sendiri, yang lain menggunakan saya. Ini digunakan sebagai referensi kembali ke objek "nyata" sebagai lawan acara.

Itu adalah sesuatu yang membuat saya sedikit lama untuk benar-benar mengerti, pada awalnya terlihat aneh.

Saya biasanya melakukan ini tepat di atas objek saya (maafkan kode demo saya - itu lebih konseptual daripada yang lain dan bukan pelajaran tentang teknik pengkodean yang sangat baik):

function MyObject(){
  var me = this;

  //Events
  Click = onClick; //Allows user to override onClick event with their own

  //Event Handlers
  onClick = function(args){
    me.MyProperty = args; //Reference me, referencing this refers to onClick
    ...
    //Do other stuff
  }
}

var functionX = function() {
  var self = this;
  var functionY = function(y) {
    // If we call "this" in here, we get a reference to functionY,
    // but if we call "self" (defined earlier), we get a reference to function X.
  }
}

sunting: meskipun, fungsi bersarang dalam suatu objek mengambil objek jendela global daripada objek di sekitarnya.

Jika Anda melakukan ES2015 atau melakukan skrip jenis dan ES5 maka Anda dapat menggunakan fungsi panah dalam kode Anda dan Anda tidak menghadapi kesalahan itu dan ini merujuk pada ruang lingkup yang Anda inginkan dalam instance Anda.

this.name = 'test'
myObject.doSomething(data => {
  console.log(this.name)  // this should print out 'test'
});

Salah satu solusi untuk ini adalah untuk mengikat semua panggilan balik Anda ke objek Anda dengan bindmetode javascript .

Anda dapat melakukan ini dengan metode bernama,

function MyNamedMethod() {
  // You can now call methods on "this" here 
}

doCallBack(MyNamedMethod.bind(this)); 

Atau dengan panggilan balik anonim

doCallBack(function () {
  // You can now call methods on "this" here
}.bind(this));

Melakukan ini alih-alih var self = thismenunjukkan Anda memahami bagaimana pengikatan thisberperilaku dalam javascript dan tidak bergantung pada referensi penutupan.

Juga, operator panah gemuk di ES6 pada dasarnya sama dengan memanggil .bind(this)fungsi anonim:

doCallback( () => {
  // You can reference "this" here now
});

Saya belum pernah menggunakan jQuery, tetapi di perpustakaan seperti Prototype Anda dapat mengikat fungsi ke lingkup tertentu. Maka dengan itu dalam pikiran kode Anda akan terlihat seperti ini:

 $('#foobar').ready('click', this.doSomething.bind(this));

Metode bind mengembalikan fungsi baru yang memanggil metode asli dengan ruang lingkup yang telah Anda tentukan.

Hanya menambahkan ini bahwa dalam ES6 karena fungsi panah Anda tidak perlu melakukan ini karena mereka menangkap thisnilainya.

Saya pikir itu sebenarnya tergantung pada apa yang akan Anda lakukan di dalam doSomethingfungsi Anda . Jika Anda akan mengakses MyObjectproperti menggunakan kata kunci ini maka Anda harus menggunakannya. Tapi saya pikir fragmen kode berikut ini juga akan berfungsi jika Anda tidak melakukan hal-hal khusus menggunakan object(MyObject)properti.

function doSomething(){
  .........
}

$("#foobar").ready('click', function(){

});