Bagaimana untuk Mengekalkan Konteks dalam Fungsi Prototaip JavaScript?

Memelihara Konteks dalam Fungsi Prototaip JavaScript: Panduan Komprehensif

Ramai pembangun JavaScript menghadapi cabaran apabila cuba mengekalkan konteks (nilai "ini ") dalam fungsi prototaip. Panduan ini bertujuan untuk memberikan pemahaman yang menyeluruh tentang cara menyelesaikan isu ini dengan berkesan.

Dalam contoh yang disediakan:

MyClass = function() {
  this.element = $('#element');
  this.myValue = 'something';

  // some more code
}

MyClass.prototype.myfunc = function() {
  // at this point, "this" refers to the instance of MyClass

  this.element.click(function() {
    // at this point, "this" refers to the DOM element
    // but what if I want to access the original "this.myValue"?
  });
}

new MyClass();

Isu timbul apabila pengendali acara ditakrifkan dalam fungsi prototaip " myfunc." Semasa acara klik, "ini" tidak lagi merujuk kepada contoh MyClass tetapi kepada elemen DOM.

Memelihara Konteks dengan Bind

Kaedah "bind" menawarkan penyelesaian yang mudah. Ia mencipta fungsi baharu yang mengekalkan konteks (nilai ini) bagi fungsi asal, walaupun apabila digunakan dalam konteks yang berbeza.

Dengan menggunakan bind dalam contoh:

MyClass.prototype.myfunc = function() {

  this.element.click((function() {
    // ...
  }).bind(this));
};

Klik pengendali acara mengekalkan konteks contoh MyClass, membenarkan akses kepada "this.myValue."

Pengikatan Tambahan Contoh

var obj = {
  test: 'obj test',
  fx: function() {
    alert(this.test + '\n' + Array.prototype.slice.call(arguments).join());
  }
};

var test = "Global test";
var fx1 = obj.fx;
var fx2 = obj.fx.bind(obj, 1, 2, 3);

fx1(1,2);
fx2(4, 5);

Dalam contoh ini:

• fx1 digunakan secara langsung, menghasilkan konteks global ("ujian global") untuk "ini."
• fx2 ialah fungsi terikat yang mengekalkan konteks obj dan menghantar hujah dengan betul.

Pertimbangan Penyesuaian

Jika berbilang fungsi prototaip memerlukan pemeliharaan konteks, mencipta fungsi ikatan tersuai mungkin diperlukan. Anda boleh mencipta versi bind yang sedar konteks untuk MyClass anda:

MyClass.prototype.myBind = function(func) {
  var context = this;
  return function() {
    func.apply(context, arguments);
  };
};

Kaedah ikatan tersuai ini kemudiannya boleh digunakan dalam fungsi prototaip:

MyClass.prototype.myfunc = function() {

  this.element.click(this.myBind(function() {
    // ...
  }));
};

Kesimpulan

Memelihara konteks dalam fungsi prototaip JavaScript adalah penting untuk mengekalkan kefungsian yang betul dan mengelakkan perkara yang tidak dijangka tingkah laku. Kaedah "bind" menyediakan penyelesaian yang berkesan dan intuitif, tetapi penyesuaian mungkin diperlukan dalam senario yang lebih kompleks. Dengan memahami teknik ini, anda boleh menggunakan fungsi prototaip dengan yakin tanpa menjejaskan pemeliharaan konteks.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Konteks dalam Fungsi Prototaip JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!