Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Mengekalkan Konteks dalam Fungsi Prototaip JavaScript?

Bagaimana untuk Mengekalkan Konteks dalam Fungsi Prototaip JavaScript?

Susan Sarandon
Lepaskan: 2024-11-04 00:21:03
asal
582 orang telah melayarinya

How to Preserve Context in JavaScript Prototype Functions?

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();
Salin selepas log masuk

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));
};
Salin selepas log masuk

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);
Salin selepas log masuk

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);
  };
};
Salin selepas log masuk

Kaedah ikatan tersuai ini kemudiannya boleh digunakan dalam fungsi prototaip:

MyClass.prototype.myfunc = function() {

  this.element.click(this.myBind(function() {
    // ...
  }));
};
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan