Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah Saya Boleh Menyusun Prototaip JavaScript dan Mengekalkan Konteks `ini` Semasa Pewarisan?

Bagaimanakah Saya Boleh Menyusun Prototaip JavaScript dan Mengekalkan Konteks `ini` Semasa Pewarisan?

Barbara Streisand
Barbara Streisandasal
2024-11-19 21:48:03689semak imbas

How Can I Organize JavaScript Prototypes and Maintain `this` Context During Inheritance?

Mengatur Prototaip JavaScript dengan Rujukan dan Warisan Objek Terpelihara

Dalam JavaScript, menyusun kod menggunakan prototaip dan warisan boleh menjadi mencabar apabila aplikasi semakin besar . Pertimbangkan senario berikut: kami mempunyai kelas karusel dengan pelbagai fungsi:

Carousel.prototype.next = function () {...}
Carousel.prototype.prev = function () {..}
Carousel.prototype.bindControls = function () {..}

Untuk menambah baik organisasi kod, kami mungkin mahu mengumpulkan fungsi ini sebagai objek:

Carousel.prototype.controls = {
   next: function () { ... } , 
   prev: function() { ... },
   bindControls: function () { .. }
}

Walau bagaimanapun, pendekatan ini memecahkan rujukan kepada objek ini, yang membawa kepada ralat apabila mewarisi daripada kelas. Untuk menangani isu ini, kita boleh meneroka strategi yang berbeza:

Mencipta Kelas Kawalan:

Satu pendekatan ialah mentakrifkan kelas Kawalan berasingan seperti berikut:

var Controls = function (controllable_object) {
    this.ref = controllable_object;
};
Controls.prototype.next = function () {
    this.ref.foo();
}
// ..

var Carousel = function () {
    this.controls = new Controls(this);
};
// ..

Ini membolehkan kami mengekalkan rujukan kepada objek asal, tetapi ia tidak membenarkan mengatasi pelaksanaan Kawalan.

Menggunakan Suntikan Ketergantungan:

Pendekatan yang lebih fleksibel ialah menggunakan suntikan pergantungan:

var Controls = function (controllable_object) {
    this.ref = controllable_object;
};
Controls.prototype.next = function () {
    this.ref.foo();
}
// ..

var Carousel = function () {
        this.controllers = [];
    };
Carousel.prototype.addController = function (controller) {
        this.controllers.push(controller);
    };
// ..

var carousel = new Carousel();
carousel.addController(new Controls(carousel));

Ini membolehkan kami mencipta berbilang pengawal dan menambahkannya pada karusel secara dinamik, memberikan kefleksibelan dan keupayaan untuk mengatasi pelaksanaan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyusun Prototaip JavaScript dan Mengekalkan Konteks `ini` Semasa Pewarisan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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