JavaScriptは対象継承方式に対してまとめられている.
4145 ワード
対象に向けた言語の多くは継承をサポートしており、最も重要な利点はコード多重化であり、大型ソフトウェアシステムを構築することである.一つのクラスが他のクラスの属性や方法を再利用できるようになったら、それを継承と呼びます.この角度からJSの継承方式を見てみます.JSでの継承方式は書き方と密接な関係があります.書き方によって継承方式が違います.各種の流行JSライブラリの継承方式もそれぞれ違っています.最も簡単な多重から開始する.
1、構造関数の書き方、方法でレプリカ親属性/フィールドをサブクラスに呼び出して継承を実現する.
ここでは父類、子類は全部構造関数で書いています.原型は不要です.サブクラスは親関数を呼び出して親の属性をコピーします.
2、プロトタイプ書き込みクラス、プロトタイプの継承
core JS自体の対象システムは原型方式で継承されています.あるいはコールJSは一般的なクラス継承システムではなく、原型継承を使って自分の対象システムを実現しています.仕事の中で私達も原型の方式で継承を実現することができて、コードは多重して自分の機能のモジュールを構築します.
出力からは、サブクラスが親タイプのPolygonの属性sidesと方法setSidesを継承していることが分かりますが、sidesは0です.どうして三角形なのでしょうか?tri.set Sides(3)を呼び出して三角形にします.これはとても不便そうです.パラメータを渡すことができないということは、プロトタイプの欠点です.長所は「is a」の関係を正しく維持していることです.
3、コンストラクター/プロトタイプの書き方を組み合わせて、前の方式で継承します.
この方式は父類、子類の属性は全部構造関数にかけられています.方法は全部原型にかけられています.
1、構造関数の書き方、方法でレプリカ親属性/フィールドをサブクラスに呼び出して継承を実現する.
ここでは父類、子類は全部構造関数で書いています.原型は不要です.サブクラスは親関数を呼び出して親の属性をコピーします.
**
* Polygon:
* @param {Object} sides
*/
function Polygon(sides) {
this.sides = sides;
this.setSides = function(s) {this.sides=s;}
}
/**
* Triangle:
*/
function Triangle() {
this.tempfun = Polygon;// tempfun
this.tempfun(3);//
delete this.tempfun;//
this.getArea = function(){};
}
//new
var tri = new Triangle();
console.log(tri.sides);//
console.log(tri.setSides);//
console.log(tri.getArea);//
// Triangle instanceof Polygon false
console.log(tri instanceof Triangle);//true
console.log(tri instanceof Polygon);//false
JavaScriptにおける名前関数の多様な呼び出し方法によって、サブクラスは、以下のような様々な実施形態があり得るからである.ただ、サブクラスでは親の呼び方が違っています.function Triangle() {
Polygon.call(this,3); //call
this.getArea = function(){};
}
function Triangle() {
Polygon.apply(this,[3]); //apply
this.getArea = function(){};
}
function Triangle() {
var temp = new Polygon(3); //new
for(atr in temp) { //
this[atr] = temp[atr];
}
this.getArea = function(){};
}
2、プロトタイプ書き込みクラス、プロトタイプの継承
core JS自体の対象システムは原型方式で継承されています.あるいはコールJSは一般的なクラス継承システムではなく、原型継承を使って自分の対象システムを実現しています.仕事の中で私達も原型の方式で継承を実現することができて、コードは多重して自分の機能のモジュールを構築します.
/**
* Polygon:
*
*/
function Polygon() {}
Polygon.prototype.sides = 0;
Polygon.prototype.setSides = function(s) {this.sides=s;}
/**
* Triangle:
*/
function Triangle() {}
Triangle.prototype = new Polygon(); //
Triangle.prototype.getArea = function(){}
//new
var tri = new Triangle();
console.log(tri.sides);//
console.log(tri.setSides);//
console.log(tri.getArea);//
//instanceof
console.log(tri instanceof Triangle);//true,
console.log(tri instanceof Polygon);//true,
出力からは、サブクラスが親タイプのPolygonの属性sidesと方法setSidesを継承していることが分かりますが、sidesは0です.どうして三角形なのでしょうか?tri.set Sides(3)を呼び出して三角形にします.これはとても不便そうです.パラメータを渡すことができないということは、プロトタイプの欠点です.長所は「is a」の関係を正しく維持していることです.
3、コンストラクター/プロトタイプの書き方を組み合わせて、前の方式で継承します.
この方式は父類、子類の属性は全部構造関数にかけられています.方法は全部原型にかけられています.
/**
* Polygon:
*/
function Polygon(sides) {
this.sides = sides;
}
Polygon.prototype.setSides = function(s) {this.sides=s;}
/**
* Triangle
* @param {Object} base
* @param {Object} height
*/
function Triangle(base,height) {
Polygon.call(this,3);//
this.base = base;
this.height = height;
}
Triangle.prototype = new Polygon();//
Triangle.prototype.getArea = function(){ //
return this.base*this.height/2;
}
//new
var tri = new Triangle(12,4);
console.log(tri.sides);//
console.log(tri.setSides);//
console.log(tri.base);//
console.log(tri.height);//
console.log(tri.getArea);//
//instanceof , "is a"
console.log(tri instanceof Triangle);//true,
console.log(tri instanceof Polygon);//true,