Analisis contoh penggunaan warisan rantai prototaip javascript

Analisis contoh penggunaan warisan rantai prototaip javascript_kemahiran javascript

WBOY

Lepaskan： 2016-05-16 16:17:37

asal

896 orang telah melayarinya

Artikel ini menganalisis penggunaan pewarisan rantaian prototaip JavaScript dengan contoh. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

function Shape(){ 

this.name = 'shape'; 

this.toString = function(){ 

Kembalikan nama ini. 

} 

} 

fungsi TwoDShape(){ 

this.name = 'Bentuk 2D';
} 

fungsi Segitiga(sisi, tinggi){ 

this.name = 'Segitiga'; 

this.side = sebelah;
ini.tinggi = tinggi;
this.getArea = function(){ 

Kembalikan ini.sisi*ini.tinggi/2;
}; 

} 

/* pusaka */ 

TwoDShape.prototype = new Shape();
Triangle.prototype = TwoDShape();
 
Apabila kita menulis semula sepenuhnya sifat prototaip objek, kadangkala ia akan memberi kesan negatif tertentu pada sifat pembina objek. 

Oleh itu, selepas kami melengkapkan tetapan perhubungan warisan yang berkaitan, adalah satu tabiat yang sangat baik untuk menetapkan semula atribut const bagi objek ini dengan sewajarnya. Seperti yang ditunjukkan di bawah:

Salin kod

Kod adalah seperti berikut:TwoDShape.prototype.constructor = TwoDShape; Triangle.prototype.constructor = Segitiga; Ditulis semula:

Salin kod

Kod adalah seperti berikut:function Shape(){} Shape.prototype.name = 'shape'; Shape.prototype.toString = function(){ kembalikan this.name;

}

fungsi TwoDShape(){} 

TwoDShape.prototype = new Shape();
TwoDShape.prototype.constructor = TwoDShape 

TwoDShape.prototype.name = '2d shape'; 

fungsi Segitiga(sisi, tinggi){ 

this.side = sebelah;
ini.tinggi = tinggi;
} 

Triangle.prototype = TwoDShape baharu;
Triangle.prototype.constructor = Segi tiga;

Triangle.prototype.name = 'Segitiga'; 

Triangle.prototype.getArea = function(){ 

kembalikan this.side*this.height/2;
}

Tulis semula (laluan rujukan bukannya nilai): 

Salin kod

 Kod adalah seperti berikut:

function Shape(){}

Shape.prototype.name = 'shape';
Shape.prototype.toString = function(){

kembalikan this.name; } fungsi TwoDShape(){} TwoDShape.prototype = Bentuk.prototaip; TwoDShape.prototype.constructor = TwoDShape

TwoDShape.prototype.name = 'bentuk 2d';

fungsi Segitiga(sisi, tinggi){ 

this.side = sebelah;
ini.tinggi = tinggi;
} 

Triangle.prototype = TwoDShape.prototype;
Triangle.prototype.constructor = Segi tiga;

Triangle.prototype.name = 'Segitiga';
Triangle.prototype.getArea = function(){ 

kembalikan this.side*this.height/2;
}

Walaupun ia meningkatkan kecekapan, kaedah ini mempunyai kesan sampingan Kerana ia diluluskan melalui rujukan dan bukannya nilai, nilai nama dalam "objek induk" terjejas. 

Objek anak dan objek induk menghala ke objek yang sama. Jadi sebaik sahaja objek kanak-kanak mengubah suai prototaipnya, objek induk juga akan ditukar serta-merta. 

Tulis semula sekali lagi (menggunakan pembina sementara): 

Salin kod

 Kod adalah seperti berikut:
fungsi Shape(){} 

Shape.prototype.name = 'shape'; 

Shape.prototype.toString = function(){ 

kembalikan this.name; 

} 

fungsi TwoDShape(){} 

var F = function(){} 

F.prototaip = Bentuk.prototaip;
TwoDShape.prototype = baharu F();
TwoDShape.prototype.constructor = TwoDShape 

TwoDShape.prototype.name = 'bentuk 2d';
fungsi Segitiga(sisi, tinggi){ 

this.side = sebelah;
ini.tinggi = tinggi;
} 

F.prototaip = TwoDShape.prototype;
Triangle.prototype = F(); 

Triangle.prototype.constructor = Segi tiga;
Triangle.prototype.name = 'Segitiga';
Triangle.prototype.getArea = function(){ 

kembalikan this.side*this.height/2;
}

Walaupun ia meningkatkan kecekapan, kaedah ini mempunyai kesan sampingan Kerana ia diluluskan melalui rujukan dan bukannya nilai, nilai nama dalam "objek induk" terjejas. 

Objek kanak-kanak dan objek induk menghala ke objek yang sama. Jadi sebaik sahaja objek kanak-kanak diubah suai dengan menjajarkan prototaip, objek induk juga akan ditukar serta-merta. 

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.