JS継承方法 -- 事例説明

利 1. プロトタイプ チェーン: プロトタイプを使用して、ある参照型に別の参照型の属性とメソッドを継承させます。各コンストラクターにはプロトタイプ オブジェクトが含まれており、この例には 1 つの内部ポインターが含まれています。プロトタイプオブジェクトに。

プリミティブチェーン実装の基本パターン:

function SuperType(){
    this.colors =[“red”, “blue”, “green”];
}
function SubType(){
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(instance1.colors);  //red, blue, green, black
var instance2 = new SubType();
alert(instance2.colors);   //red, blue, green, black

最終結果: インスタンスは SubType のプロトタイプを指し、SubType のプロトタイプは SuperType のプロトタイプを指します。 Object を継承します

すべての関数のデフォルトのプロトタイプは次のとおりです。 Object

用のインスタンス 質問: 例えば、サブクラスのインスタンスを作成した場合、そのサブクラスのインスタンスの属性を変更すると、他のサブクラスを作成するときにその影響を受けてしまいます。コードは次のとおりです:

function SuperType(){
    this.colors =[“red”, “blue”, “green”];
}
function SubType(){
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(instance1.colors);  //red, blue, green, black
var instance2 = new SubType();
alert(instance2.colors);   //red, blue, green, black

上記の結果は、他のインスタンスの属性値に影響を与えることを示しています

2. コンストラクターの借用: サブタイプ コンストラクター内でスーパータイプ コンストラクターを呼び出します

function SuperType(){
    this.colors =[“red”, “blue”, “green”];
}
function SubType{}(
   SuperType.call(this);     //继承了SuperType。通过调用SuperType的构造函数，借用其构造结构
}
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(intance1.colors);     //red,blue,green,black
var instance2 = new SubType();
alert(instance2.colors);   //red,blue,green

を使用しますこのメソッドはサブクラス コンストラクターにスーパータイプを追加します。型コンストラクターは次のようにパラメーターを渡します:

function SuperType(name){
    this.name = name;
}
function SubType(){
SuperType.call(this,“Nicholas”);        //传入参数，利用这个参数初始化父类构造函数中的name
this.age = 29;
}
var instance = new SubType();
alert(instance.name);   //Nicholas
alert(instance.age);   //29

問題: 再利用するのが不便

3. 結合継承: プロトタイプ チェーンを使用してプロトタイプのプロパティとメソッドの継承を実現し、コンストラクターを借用します。インスタンスのプロパティを実現するための継承

サンプルコード:

function SuperType(name){
this.name = name;
this.colors = [“red”, “blue”,“green”];
}
SuperType.prototype.sayName = function(){   //定义了一个方法，该方法在继承的子类中也可以用
    alert(this.name);
}
function SubType(name, age){
SuperType.call(this, name);    //继承SuperType的一部分，this指SubType，
this.age = age;    //自己新定义的属性age也可以进行赋值
}
SubType.prototype = new SuperType();     //利用原型继承，可以使用父类的方法（见原型链继承）
SubType.prototype.sayAge = function(){   //定义SubType特有的新方法
    alert(this.age);
}
var instance1 = new SubType(“Martin”, 10);
instance1.colors.push(“black”);
alert(instance1.colors);  //red,blue,green,black
instance1.sayName();   //Martin
instance1.sayAge();  //10
var instance2 = new SubType(“Greg”, 27);
alert(instance2.colors);   //red,blue,green
instance2.sayName();  //Greg
instance2.sayAge();  //27

関連推奨事項:

JS での継承メソッドの詳細な例

JS で継承を実装するいくつかの方法

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