Mengendalikan Rujukan \'ini\' dalam Kaedah Prototaip dengan setInterval dan setTimeout: Apakah Penyelesaian?

Mengendalikan Rujukan ini dalam Kaedah Prototaip dengan setInterval dan setTimeout

Dalam JavaScript, kaedah prototaip kehilangan perkaitan ini apabila diekstrak dan dihantar ke tempat lain. Pertimbangkan kod berikut:

function Foo() {}
Foo.prototype = {
  bar: function () {
    this.baz();
  },
  baz: function () {
    this.draw();
    requestAnimFrame(this.baz);
  }
};

Kod ini gagal dengan ralat kerana ini tidak diikat dengan betul dalam setInterval atau setTimeout panggil balik.

Penyelesaian:

Terdapat beberapa cara untuk menangani isu ini:

Panggilan Kaedah Balut dalam Fungsi Tanpa Nama:

var that = this;
setInterval(function () {
  return that.baz();
}, 1000);

Ini mengekalkan ini daripada fungsi luar menggunakan pemboleh ubah pembantu.

Panggilan Kaedah Balut dalam Fungsi Anak Panah Lemak:

setInterval(() => this.baz(), 1000);

Fungsi tanpa nama anak panah lemak mengekalkan ini daripada fungsi sekeliling.

Gunakan Fungsi Mengikat:

setInterval(this.baz.bind(this), 1000);

// dojo toolkit example:
setInterval(dojo.hitch(this, 'baz'), 10);

Fungsi pengikatan seperti Function.prototype.bind atau setara perpustakaan membolehkan anda mengikat konteks ini secara eksplisit.

Atas ialah kandungan terperinci Mengendalikan Rujukan \'ini\' dalam Kaedah Prototaip dengan setInterval dan setTimeout: Apakah Penyelesaian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!