Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah JavaScript melaksanakan warisan?

Bagaimanakah JavaScript melaksanakan warisan?

PHPz
PHPzasal
2023-04-06 08:55:131079semak imbas

JavaScript ialah bahasa berorientasikan objek, dan warisan ialah ciri penting pengaturcaraan berorientasikan objek. Dalam JavaScript, terdapat banyak cara untuk melaksanakan warisan, dan artikel ini akan memperkenalkan beberapa kaedah yang lebih biasa.

1. Pewarisan rantaian prototaip

Pewarisan rantaian prototaip ialah kaedah pewarisan paling asas dalam JavaScript dan yang paling biasa digunakan. Melalui pewarisan rantaian prototaip, subkelas boleh mewarisi sifat dan kaedah kelas induk.

Kaedah pelaksanaan pewarisan rantaian prototaip adalah seperti berikut:

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    this.age = age;
    Parent.call(this, name);
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

Dalam kod di atas, kami mula-mula mentakrifkan kelas induk Induk dan anak subkelas. Dalam Child, kami menggunakan Parent.call(ini, nama) untuk memanggil pembina kelas induk, dan menunjuk prototaip Child kepada Parent melalui Child.prototype = new Parent(), dengan itu merealisasikan warisan. Pada akhirnya, kami mencipta dua kejadian subkelas, child1 dan child2, dan mengesahkan kesan warisan.

Kelebihan pewarisan rantaian prototaip ialah ia mudah untuk dilaksanakan dan mudah difahami. Tetapi kelemahannya juga jelas, iaitu, ia akan menyebabkan sifat jenis rujukan dalam objek prototaip dikongsi oleh semua keadaan.

2. Warisan Pembina

Warisan konstruktor ialah kaedah pewarisan yang agak mudah difahami Ia mencapai pewarisan dengan memanggil pembina kelas induk dalam pembina subkelas.

Kaedah pelaksanaan warisan pembina adalah seperti berikut:

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // TypeError: child1.sayName is not a function 

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // TypeError: child2.sayName is not a function

Dalam kod di atas, kami menggunakan Parent.call(ini, nama) dalam anak pembina subkelas untuk memanggil kelas induk constructor , dan tunjukkan ini kepada contoh subkelas, dengan itu merealisasikan warisan. Walau bagaimanapun, kerana warisan pembina tidak mewarisi kaedah dalam prototaip kelas induk, kita tidak boleh memanggil kaedah dalam prototaip kelas induk secara langsung dalam subkelas.

Kelebihan warisan pembina ialah ia mengelakkan masalah atribut jenis rujukan dikongsi oleh semua kejadian dalam warisan rantai prototaip, tetapi kelemahannya juga jelas, iaitu kaedah dalam prototaip kelas induk tidak boleh diwarisi.

3. Warisan gabungan

Warisan gabungan ialah kaedah warisan yang paling biasa digunakan dalam JavaScript Ia adalah cara untuk menggabungkan warisan rantaian prototaip dan warisan pembina, menyelesaikan masalah kedua-duanya .

Kaedah pelaksanaan warisan gabungan adalah seperti berikut:

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

Dalam kod di atas, kami menggunakan Parent.call(ini, nama) dalam anak pembina kelas Anak untuk memanggil induk pembina kelas Dan tunjukkan ini kepada contoh subkelas, dengan itu merealisasikan warisan. Pada masa yang sama, kami lulus Child.prototype = new Parent() dalam prototaip subkelas untuk menjadikan subkelas mewarisi prototaip kelas induk, dengan itu mewarisi kaedah dalam prototaip kelas induk.

Kelebihan warisan gabungan ialah kaedah pewarisan adalah lengkap. Ia bukan sahaja boleh mewarisi kaedah dalam prototaip kelas induk, tetapi juga mengelakkan masalah atribut jenis rujukan dikongsi oleh semua kejadian dalam pewarisan rantaian prototaip. . Tetapi kelemahannya ialah ia memanggil pembina kelas induk dua kali, yang membazirkan sejumlah ruang memori.

4. Warisan kombinasi parasit

Warisan kombinasi parasit ialah kaedah pengoptimuman warisan gabungan Ia mengelakkan masalah memanggil pembina kelas induk beberapa kali dalam prototaip subkelas, dengan itu mengurangkan overhed memori.

Kaedah pelaksanaan pewarisan kombinasi parasit adalah seperti berikut:

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = Object.create(Parent.prototype, {
    constructor: {
        value: Child,
        enumerable: false,
        writable: true,
        configurable: true
    }
});

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

Dalam kod di atas, kami menggunakan kaedah Object.create() dalam prototaip subkelas untuk mencipta salinan prototaip kelas induk, dan Atribut pembina bagi prototaip subkelas ditindih melalui parameter kedua Object.create(), supaya ia menunjuk kepada subkelas itu sendiri. Oleh kerana kaedah Object.create() tidak memanggil pembina kelas induk, ia mengelakkan masalah memanggil pembina kelas induk beberapa kali dalam prototaip kelas anak.

Kelebihan pewarisan kombinasi parasit ialah ia bukan sahaja mewarisi kaedah dalam prototaip kelas induk, tetapi juga mengelakkan masalah memanggil pembina kelas induk beberapa kali dalam prototaip kelas anak. Kelemahannya ialah pelaksanaannya lebih rumit.

Ringkasnya, terdapat banyak cara untuk melaksanakan warisan dalam JavaScript, dan setiap kaedah mempunyai kelebihan dan kekurangannya sendiri. Dalam perkembangan sebenar, kita harus memilih kaedah pewarisan yang sesuai mengikut situasi tertentu.

Atas ialah kandungan terperinci Bagaimanakah JavaScript melaksanakan warisan?. 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