一緒に手書き！ES5とES6の継承メカニズム！

プロトタイプ

コードを実行するvar o = new Object();

このとき、ポインタはオブジェクト内に格納されます。このポインタはObject.prototypeを指します。o.toString()他のメソッドを実行する（または他のプロパティにアクセスする）とき、oは最初にメソッドまたはプロパティがあるかどうかをチェックします。ない場合、内部に格納されますObject.prototypeオブジェクトを検索し、オブジェクトにObject.prototype対応する名前のメソッドまたはプロパティがあるかどうかを確認し、ある場合はメソッドまたはプロパティを呼び出しObject.prototypeます。

このポインターをoオブジェクトのプロトタイプと呼びます。

ES3仕様では、オブジェクトが別のオブジェクトのプロトタイプであるかどうかを判別できるObject.prototype.isPrototypeOf（）メソッドを定義しています。Object.prototype.isPrototypeOf(o)trueの値を返すと、Object.prototypeがoオブジェクトのプロトタイプであると判断されます。

ES3仕様では、oオブジェクトのプロトタイプを直接読み取ることはできません。つまり、oオブジェクトのプロトタイプは非表示で無形です。ES5.1仕様では、オブジェクトのプロトタイプを取得できるObject.getPrototypeOf（）メソッドを定義しています。Object.getPrototypeOf(o) === Object.prototypeObject.prototypeがoオブジェクトのプロトタイプであることを再び確認できます。

ES6の仕様はより簡単で、オブジェクト__proto__に属性を追加することでオブジェクトのプロトタイプを取得できるため、サポートされている__proto__ブラウザーでo.__proto__ === Object.prototypeはtrueも返されます。

を実行するvar x = new X();と、ブラウザが実行されx.__proto__ = X.prototype、インスタンス化されたオブジェクトのプロトタイプを対応するクラスのプロトタイプオブジェクトに設定します。これは非常に重要です。

試作チェーン 

次のコードを実行します。

function Person（）{};
var p = new Person（）;

p .__ proto__はPerson.prototypeを指し、Person.prototypeのプロトタイプはObject.prototypeを指すPerson.prototype .__ proto__であり、Object.prototype .__ proto__はnullです。

次のチェーン構造は、__ proto__の上方追跡によって形成されます。

p-> Person.prototype-> Object.prototype-> null

このプロトタイプのチェーン構造をプロトタイプチェーンと呼びます。Object.prototypeのプロトタイプがnullです。つまり、Object.prototypeのプロトタイプがありません。

JavaScriptオブジェクトには、プロトタイプオブジェクトを指すチェーンがあります。オブジェクトのプロパティにアクセスしようとすると、オブジェクトを検索するだけでなく、オブジェクトのプロトタイプとオブジェクトのプロトタイプのプロトタイプも検索し、一致する名前のプロパティが見つかるか、到達するまでこのレイヤーを上方向に検索しますプロトタイプチェーンの終わり。

JavaScriptでの継承はプロトタイプを介して実現されます。classキーワードはES6 で導入されていますが、これはプロトタイプの構文上の糖衣です。JavaScriptの継承は依然としてプロトタイプに基づいています。 

 

ES5寄生結合継承（業界で提唱されている方法）

つまり、コンストラクターを使用してプロパティを継承し、プロトタイプチェーンのハイブリッド形式でメソッドを継承します。

その背後にある基本的な考え方は、サブタイプのプロトタイプを指定するためにスーパータイプコンストラクターを呼び出す必要がないことです。必要なのは、スーパータイププロトタイプのコピーだけです。基本的には、寄生継承を使用してスーパータイプのプロトタイプを継承し、その結果をサブタイプのプロトタイプに割り当てます。

function inserit（son、father）{
     var obj = Object.create（father.prototype）; 
    son.prototype = obj; 
    obj.constructor = son 
} 

function SuperType（name、colors）{
     this .name = name;
    this .colors = colors; 
} 
SuperType.prototype.sayName = function （）{
     この.nameを返す ; 
} function SubType（job、name、color）{ 
    SuperType.call（this 、name、color）;
    this .job = job;

 
}
 // 核心方法
inserit（SubType、SuperType）; 
SubType.prototype.sayjob = function （）{
     この.jobを返す ; 
} var instance = new SubType（ "doctor"、 "John"、["red"、 "green" ]）; 
console.log（instance.sayjob（）、instance.sayName（））// 医師、ジョン

ES6の継承

ES6クラスによる継承をサポートします。メソッドは比較的単純です。コードは次のとおりです

class Point { 
    constructor（x、y）{ 
        this .x = x
         this .y = y 
    } 
    
    toString（）{ 
        return  this .x + '' + this .y 
    } 
} 

class ColorPoint extends Point { 
    constructor（x、y、color ）{ 
        super（x、y）//调用父类的コンストラクタ（x、y）
        this .color = color 
    } 
    
    toString（）{ 
        return  this .color + '' + super.toString（）//调用父
类的toString （）    } 
} 

var colorPoint = newColorPoint（ '1'、 '2'、 'red' ）

console.log（colorPoint.toString（））   // 赤12