JavaScriptの継承方法を詳しく解説(1)

ほとんどのオブジェクト指向言語は継承をサポートしています。継承の最も重要な利点はコードの再利用であり、それによって大規模なソフトウェア システムを構築できます。クラスが別のクラスのプロパティやメソッドを再利用できる場合、それは継承と呼ばれます。この観点からJSの継承方法を見てみましょう。 JSの継承方法はクラスの書き方と密接に関係しています。クラスの記述方法が異なると、継承方法も異なります。さまざまな一般的な JS ライブラリにも、さまざまな継承方法があります。最も単純な再利用から始めましょう。

1. コンストラクターモードでクラスを作成し、メソッド呼び出しを通じて親クラスの属性/フィールドをサブクラスにコピーして継承を実現します

ここでは、親クラスとサブクラスはプロトタイプなしでコンストラクターモードで作成されています。 。サブクラスは親クラスの関数を呼び出して、親クラスの属性をコピーします。

/**
 * 父类Polygon:多边形
  * @param {Object} sides 
  */
    function Polygon(sides) {
    this.sides = sides;
    this.setSides = function(s) {this.sides=s;}
  }
    /**
  * 子类Triangle:三角形
   */function Triangle() {this.tempfun = Polygon;//父类引用赋值给子类的一个属性
   tempfunthis.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);//trueconsole.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(){};
}

このメソッドの欠点は、instanceof で親クラスをチェックするときに、サブクラスのインスタンス オブジェクトが常に false になることです。これは、Java の継承「is a」の関係に反します。

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 の属性 Side とメソッド setSides を継承していることが出力からわかりますが、辺が 0 であるのに、どうして三角形になるのでしょうか?三角形にするには tri.setSides(3) を呼び出す必要があります。これは非常に不便に思えます。パラメーターを渡すことができないのが、プロトタイプ メソッドの欠点です。利点は、正しく維持されることです」

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，表明三角形也是多边形

。

以上がJavaScriptの継承方法を詳しく解説(1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。