JavaScript プロトタイプチェーン継承の分析使用例_JavaScript スキル

この記事では、JavaScript プロトタイプ チェーン継承の使用法を例とともに分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

コードをコピー コードは次のとおりです。

function Shape(){
this.name = '形状'
this.toString = function(){
this.name を返します
}
}

function TwoDShape(){
this.name = '2D 形状'
; }
関数 Triangle(辺,高さ){
this.name = 'トライアングル'
; this.side = サイド
this.height = 高さ
this.getArea = function(){
this.side*this.height/2 を返します
};
}

/* 継承 */
TwoDShape.prototype = 新しい Shape(); Triangle.prototype = new TwoDShape();

オブジェクトのプロトタイプ プロパティを完全に書き直すと、オブジェクトのコンストラクター プロパティに特定の悪影響を及ぼすことがあります。

したがって、関連する継承関係の設定を完了した後、これらのオブジェクトの const 属性をそれに応じてリセットすることは非常に良い習慣です。以下に示すように:

コードをコピーします コードは次のとおりです。

TwoDShape.prototype.constructor = TwoDShape; Triangle.prototype.constructor = Triangle;

書き直されました:

コードをコピー コードは次のとおりです:function Shape(){}

Shape.prototype.name = '形状'
Shape.prototype.toString = function(){
この名前を返します
}

関数 TwoDShape(){}

TwoDShape.prototype = 新しい Shape(); TwoDShape.prototype.constructor = TwoDShape

TwoDShape.prototype.name = '2D 形状'

関数 Triangle(辺,高さ){
this.side = サイド
this.height = 高さ
}

Triangle.prototype = 新しい TwoDShape
Triangle.prototype.constructor = 三角形

Triangle.prototype.name = '三角形'; Triangle.prototype.getArea = function(){
this.side*this.height/2 を返します
; }


書き換え (値ではなく参照渡し):

コードをコピー

コードは次のとおりです:function Shape(){} Shape.prototype.name = '形状'

Shape.prototype.toString = function(){

this.name を返します
}

関数 TwoDShape(){}

TwoDShape.prototype = Shape.prototype
TwoDShape.prototype.constructor = TwoDShape

TwoDShape.prototype.name = '2D 形状'

関数 Triangle(辺,高さ){
this.side = サイド
this.height = 高さ
}

Triangle.prototype = TwoDShape.prototype
Triangle.prototype.constructor = 三角形

Triangle.prototype.name = '三角形'; Triangle.prototype.getArea = function(){
this.side*this.height/2 を返します
; }


このメソッドは効率が向上しますが、値ではなく参照によって渡されるため、「親オブジェクト」の名前の値が影響を受けます。
子オブジェクトと親オブジェクトは同じオブジェクトを指します。したがって、子オブジェクトがそのプロトタイプを変更すると、親オブジェクトもすぐに変更されます。

再度書き直します (一時コンストラクターを使用):

コードをコピー

コードは次のとおりです:

関数 Shape(){}
Shape.prototype.name = '形状'
Shape.prototype.toString = function(){
this.name を返します
}
関数 TwoDShape(){}
var F = function(){}
F.プロトタイプ = 形状.プロトタイプ
TwoDShape.prototype = 新しい F(); TwoDShape.prototype.constructor = TwoDShape
TwoDShape.prototype.name = '2D 形状'
関数 Triangle(辺,高さ){
this.side = サイド
this.height = 高さ
}
F.prototype = TwoDShape.prototype
Triangle.prototype = 新しい F(); Triangle.prototype.constructor = 三角形
Triangle.prototype.name = '三角形'; Triangle.prototype.getArea = function(){
this.side*this.height/2 を返します
; }


このメソッドは効率が向上しますが、値ではなく参照によって渡されるため、「親オブジェクト」の名前の値が影響を受けます。

子オブジェクトと親オブジェクトは同じオブジェクトを指します。したがって、プロトタイプを調整して子オブジェクトが変更されると、親オブジェクトもすぐに変更されます。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。