JSの継承メソッドを詳しく解説

この記事では主にJavaScriptの継承メソッドの詳細な説明を紹介しています この記事では、jsの継承、プロトタイプ継承とクラス継承、プロトタイプチェーン継承、クラス継承、組み合わせ継承、プロトタイプ継承などの概念を説明しています。

jsの継承の概念を参照してください

jsでは次の2つの継承メソッドが一般的に使用されます:

プロトタイプチェーン継承(オブジェクト間の継承)
クラスベースの継承(コンストラクター間の継承)
jsは異なるためJava は真のオブジェクト指向言語ですが、js はオブジェクトに基づいており、クラスの概念がありません。したがって、継承を実装したい場合は、js のプロトタイプ機構を使用するか、オブジェクト指向言語ではクラスを使用してカスタム オブジェクトを作成します。ただし、js 内のすべてはオブジェクトなので、カスタム オブジェクトを作成するにはどうすればよいでしょうか?これには、js プロトタイプを使用する必要があります。 プロトタイプを単にテンプレートと見なすことができます。新しく作成されたカスタム オブジェクトはすべて、このテンプレート (プロトタイプ) のコピーです (実際にはコピーではなくリンクですが、このリンクは表示されません。新しくインスタンス化されたオブジェクト内の、プロトタイプ オブジェクトを指す非表示の Proto ポインター)。

js は、コンストラクターとプロトタイプを通じて、実装されたクラスの機能をシミュレートできます。 さらに、js クラスの継承の実装もプロトタイプ チェーンに依存します。

プロトタイプの継承とクラスの継承

クラスの継承とは、サブタイプのコンストラクター内でスーパータイプのコンストラクターを呼び出すことです。 厳密なクラス継承はあまり一般的ではなく、通常は組み合わせて使用​​されます:

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

function Super(){
    this.colors=["red","blue"];
}
function Sub(){
    Super.call(this);
}

プロトタイプ継承は、既存のオブジェクトを使用して新しいオブジェクトを作成し、サブクラスのプロトタイプをポイントします。親クラスのプロトタイプ チェーンに結合することと同じです

プロトタイプ チェーンの継承

サブクラスが親クラスの属性 (メソッドを含む) を継承するには、まず、コンストラクタ。次に、親クラスの新しいインスタンスをコンストラクターのプロトタイプに割り当てます。コードは次のとおりです。

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

<script>
    function Parent(){
        this.name = &#39;mike&#39;;
    }
    function Child(){
        this.age = 12;
    }
    Child.prototype = new Parent();//Child继承Parent，通过原型，形成链条
    var test = new Child();
    alert(test.age);
    alert(test.name);//得到被继承的属性
    //继续原型链继承
    function Brother(){   //brother构造
        this.weight = 60;
    }
    Brother.prototype = new Child();//继续原型链继承
    var brother = new Brother();
    alert(brother.name);//继承了Parent和Child,弹出mike
    alert(brother.age);//弹出12
</script>

上記のプロトタイプ チェーンの継承には、まだ 1 つの欠落リンクがあります。それは、すべてのコンストラクターが Object から継承することです。オブジェクトの継承は

自動的に完了

し、手動で継承する必要はありません。では、それらの所属は何でしょうか?

プロトタイプとインスタンスの間の関係を決定する

プロトタイプとインスタンスの間の関係は 2 つの方法で決定できます。 OperatorのinstanceofとisPrototypeof()メソッド:

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

alert(brother instanceof Object)//true
alert(test instanceof Brother);//false,test 是brother的超类
alert(brother instanceof Child);//true
alert(brother instanceof Parent);//true

プロトタイプチェーンに出現したプロトタイプである限り、プロトタイプから派生したインスタンスのプロトタイプであると言えます。したがって、isPrototypeof()メソッドもtrueを返します

jsでは、継承された関数をスーパータイプ(親クラス、基底クラスでも可)と呼び、継承された関数をサブタイプ(サブクラス、派生クラス)と呼びます。 ）。プロトタイプ継承の使用には主に 2 つの問題があります:

まず、リテラルでプロトタイプをオーバーライドすると、参照型のプロトタイプを使用する関係が壊れ、サブタイプはスーパータイプにパラメーターを渡すことができなくなります。

疑似クラスは、参照の共有とスーパータイプのパラメーターを渡すことができないという問題を解決します。

借用コンストラクター (クラスの継承) テクノロジーを使用できます。

コードは次のとおりです。
コンストラクターの借用 これで先ほどの2つの問題は解決しますが、プロトタイプがないと再利用できないので、プロトタイプチェーン+借用コンストラクターパターンが必要になります

複合継承

のコードです。

<script>
    function Parent(age){
        this.name = [&#39;mike&#39;,&#39;jack&#39;,&#39;smith&#39;];
        this.age = age;
    }
    function Child(age){
        Parent.call(this,age);
    }
    var test = new Child(21);
    alert(test.age);//21
    alert(test.name);//mike,jack,smith
    test.name.push(&#39;bill&#39;);
    alert(test.name);//mike,jack,smith,bill
</script>

結合継承は、より一般的に使用される継承メソッドです。その背後にある考え方は、プロトタイプ チェーンを使用してプロトタイプのプロパティとメソッドを継承し、コンストラクターを借用してインスタンスのプロパティを継承することです。このように、関数の再利用はプロトタイプでメソッドを定義することによって実現され、各インスタンスは独自の属性を持つことが保証されます。
call() の使用法: オブジェクトのメソッドを呼び出して、現在のオブジェクトを別のオブジェクトに置き換えます。

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

<script>
    function Parent(age){
        this.name = [&#39;mike&#39;,&#39;jack&#39;,&#39;smith&#39;];
        this.age = age;
    }
    Parent.prototype.run = function () {
        return this.name  + &#39; are both&#39; + this.age;
    };
    function Child(age){
        Parent.call(this,age);//对象冒充，给超类型传参
    }
    Child.prototype = new Parent();//原型链继承
    var test = new Child(21);//写new Parent(21)也行
    alert(test.run());//mike,jack,smith are both21
</script>

プロトタイプの継承

この種の継承は、プロトタイプを使用して、カスタム型を作成せずに既存のオブジェクトに基づいて新しいオブジェクトを作成します。これは、プロトタイプの継承と呼ばれます

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

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

プロトタイプの継承は、最初に obj() 関数内に一時的なコンストラクターを作成し、次に受信オブジェクトをこのコンストラクターのプロトタイプとして使用し、最後にこの一時的な型の新しいインスタンスを返します。

寄生継承

この継承メソッドは、作成プロセスをカプセル化するためにプロトタイプと

ファクトリーパターン

を組み合わせます。

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

<script>
     function obj(o){
         function F(){}
         F.prototype = o;
         return new F();
     }
    var box = {
        name : &#39;trigkit4&#39;,
        arr : [&#39;brother&#39;,&#39;sister&#39;,&#39;baba&#39;]
    };
    var b1 = obj(box);
    alert(b1.name);//trigkit4
    b1.name = &#39;mike&#39;;
    alert(b1.name);//mike
    alert(b1.arr);//brother,sister,baba
    b1.arr.push(&#39;parents&#39;);
    alert(b1.arr);//brother,sister,baba,parents
    var b2 = obj(box);
    alert(b2.name);//trigkit4
    alert(b2.arr);//brother,sister,baba,parents
</script>

結合継承に関する小さな問題

组合式继承是js最常用的继承模式，但组合继承的超类型在使用过程中会被调用两次；一次是创建子类型的时候，另一次是在子类型构造函数的内部

代码如下:

<script>
    function Parent(name){
        this.name = name;
        this.arr = [&#39;哥哥&#39;,&#39;妹妹&#39;,&#39;父母&#39;];
    }
    Parent.prototype.run = function () {
        return this.name;
    };
    function Child(name,age){
        Parent.call(this,age);//第二次调用
        this.age = age;
    }
    Child.prototype = new Parent();//第一次调用
</script>

以上代码是之前的组合继承，那么寄生组合继承，解决了两次调用的问题。

寄生组合式继承

代码如下:

<script>
    function obj(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    function create(parent,test){
        var f = obj(parent.prototype);//创建对象
        f.constructor = test;//增强对象
    }
    function Parent(name){
        this.name = name;
        this.arr = [&#39;brother&#39;,&#39;sister&#39;,&#39;parents&#39;];
    }
    Parent.prototype.run = function () {
        return this.name;
    };
    function Child(name,age){
        Parent.call(this,name);
        this.age =age;
    }
    inheritPrototype(Parent,Child);//通过这里实现继承
    var test = new Child(&#39;trigkit4&#39;,21);
    test.arr.push(&#39;nephew&#39;);
    alert(test.arr);//
    alert(test.run());//只共享了方法
    var test2 = new Child(&#39;jack&#39;,22);
    alert(test2.arr);//引用问题解决
</script>

call和apply

全局函数apply和call可以用来改变函数中this的指向，如下：

代码如下:

// 定义一个全局函数
    function foo() {
        console.log(this.fruit);
    }
    // 定义一个全局变量
    var fruit = "apple";
    // 自定义一个对象
    var pack = {
        fruit: "orange"
    };
    // 等价于window.foo();
    foo.apply(window);  // "apple",此时this等于window
    // 此时foo中的this === pack
    foo.apply(pack);    // "orange"

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