jsにおける継承の知識を詳しく解説

この記事では、jsにおける継承の知識を主にテキストとコードの形で詳しく解説し、皆様のお役に立てれば幸いです。

1. コンストラクター、インスタンス、プロトタイプの関係を理解し​​ます。コンストラクターとインスタンスのプロトタイプはプロトタイプを指し、プロトタイプのコンストラクターはコンストラクターを指します。

2. サブクラスはメソッドと属性を再利用する必要があります。親クラスの

3. 構築されたプロトタイプは親クラスのインスタンスを指し、サブクラスはこのインスタンスを通じて親クラスの属性とメソッドにアクセスでき、この関係は層ごとに徐々に形成されてプロトタイプチェーンを形成します。

   function Super(name) {
       this.name = "name";
       this.superproperty = true;
   }
   Super.prototype.getSuperName = function () {
       return this.name;
   }
   Super.prototype.getSuperproperty = function () {
       return this.superproperty;
   }
   
   function Sub(name) {
       this.name = name;
       this.subproperty = false;
   }
   //继承
   Sub.prototype = new Super();
   Sub.prototype.getSubName = function () {
       return this.name;
   }
   Sub.prototype.getSubproperty = function () {
       return this.subproperty;
   }
   
   var instance = new Sub("ctc");
   console.log(instance.getSuperproperty());//true
   console.log(instance.getSubproperty());//false
   console.log(instance.getSuperName());//ctc
   console.log(instance.getSubName());//ctc

最後の 2 つの出力は ctc の処理で、インスタンスが「.」演算子に遭遇すると、1) インスタンスの検索、2) sub.prototype の検索、3) super.prototype の検索が実行されます。
注意すべき点

• デフォルトのプロトタイプオブジェクト

  すべてのインスタンスにはデフォルトのプロトタイプオブジェクトがあるため、super.prototype.prototypeは単にオブジェクトのプロトタイプを指しているだけです

それを定義するときは注意する必要があります

//继承
Sub.prototype = new Super();

継承中にオーバーライドしますか?このとき、sub.prototype のコンストラクターは誰を指しているのでしょうか?

• この文は、

新しいメソッドを追加してメソッドコードをオーバーライドする前に必ず配置する必要があります

Sub.prototype.getSubName = function () {
    return this.name;
}
Sub.prototype.getSubproperty = function () {
    return this.subproperty;
}

欠点

親クラスのインスタンス属性はサブクラスのプロトタイプ属性となり、共有されます

作成 サブクラス インスタンスを作成する場合、すべてのインスタンスに影響を与えずにパラメータを親クラスに渡すことはできません。

コンストラクターの借用

function Super(name) {
    this.name = name;
  
}
Super.prototype.getSuperName = function () {
    return this.name;
}


function Sub(name) {

  Super.call(this,name);

this.name = name;

}//Inherit Sub.prototype = new Super();Sub.prototype.getSubName = function () { return this.name;}

• 主に Super コンストラクターのコードを借用し、サブルーチン独自の属性の定義を実装します

しかし、このように書くと、各インスタンスが独自の属性とメソッドを持つことができ、同時にメソッド関数の再利用性が失われます

結合継承

を使用して解決します。メソッドの再利用

問題は、親クラスのコンストラクターで動的プロトタイプ構築または結合構築を使用し、コンストラクターには属性の割り当て定義のみがあり、メソッドの定義はプロトタイプ上にあることです

サブクラスに、親クラスのインスタンスを指すサブクラスのプロトタイプを追加します。サブクラスのコンストラクターは親クラスの構造を借用するため、サブクラスの各インスタンスは独自の属性を持ちますが、メソッドは共有されます。

function Super(name) {
    this.name = name;
    this.superproperty = true;
}
Super.prototype.getSuperName = function () {
    return this.name;
}

function Sub(name) {
    Super.call(this,arguments);
    this.name = name;
    this.subproperty = false;
}
//继承
Sub.prototype = new Super();

// Sub.prototype.constructor = Sub;//如果此处未绑定，上一句重写了原型，Super的实例的constructor指向的自然是Super

Sub.prototype.getSubName = function () { return this.name;}varinstance = new Sub("ctc");

プロトタイプの継承

継承の別の実装ですが、プロトタイプの助けを借りて、新しいオブジェクトを作成するためのオブジェクトがあります

function object(o) {
    function F() {
    }
    F.prototype = o;
    return F;
}

理解: F は関数でありオブジェクトであり、そのプロトタイプは object() によって受け入れられる o を指し、返される F はそのプロトタイプが o を指すオブジェクトです。

順序: Object.creat() は上記の関数を標準化します。つまり、Object.creat(o) も上記のコードを実装します

寄生継承

プロトタイプ継承に基づいて、このオブジェクトは強化されます

function creatAnother(o) {
    var clone = Object.create(o);
    clone.name = "ctc";
    clone.sayname = function () {
        console.log(this.name);
    }
    return clone;
}

属性を追加しましたオブジェクトへのメソッド

寄生結合継承

目的は、結合継承の問題を解決することです。結合継承では、Super() が少なくとも 2 回呼び出されます。1. Super.call(this,arguments) 2. Sub.プロトタイプ = new Super()

実際、サブクラスのプロトタイプが親クラスのメソッドを継承するようにしたいだけです (すべてのインスタンスが独自のメソッド空間を持っているわけではないため、通常は親クラスのプロトタイプ上にあります)

プロトタイプ継承を使用して、親クラスのプロトタイプからサブクラスのプロトタイプのみを継承します

function inherit(SubType,SuperType) {
    var prototype = Object.create(SuperType);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

結合継承の

Sub.prototype = new Super();

を

inherit(Sub,Super);

に置き換えます関連推奨事項:

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

JS 継承メソッドとは何ですか?

jsの継承メカニズムの詳細な解釈

以上がjsにおける継承の知識を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。