JavaScript プロトタイプチェーン継承の分析使用例_JavaScript スキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:17:37

オリジナル

895 人が閲覧しました

この記事では、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 を返します 
;
}

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