Rumah > hujung hadapan web > tutorial js > 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
Lepaskan: 2024-11-19 21:48:03
asal
729 orang telah melayarinya

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 () {..}
Salin selepas log masuk

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

Carousel.prototype.controls = {
   next: function () { ... } , 
   prev: function() { ... },
   bindControls: function () { .. }
}
Salin selepas log masuk

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

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

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!

sumber:php.cn
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