ES 5とES 6の継承

1689 ワード

ES 5の継承
ES 5の継承はプロトタイプによって実現される.
プロトタイプはオブジェクトであり、作成された各オブジェクトは自動的にPrototypesプロパティを取得します.このプロパティは、組み込まれたObject()関数ではなく、オブジェクトの字面量またはObject()で作成されたオブジェクトにほぼ等しい新しい空のオブジェクトを指します.空のオブジェクトにメンバー変数を追加できます.その後、他のオブジェクトもそのオブジェクトから継承され、自分のプロパティを使用するように使用できます.---『JavaScriptモード』
//      
function Animal { this.name = 'pig' }
function Animal2 { Animal.call(this); this.age = 18 }
console.log(new Animal2())
//  :    Animal     

//     
function Animal { this.name = 'pig' }
function Animal2 { this.age = 18 }
Animal2.prototype = new Animal();
console.log(new Animal2())
//  :      ,          ,            

//    
function Animal { this.name = 'pig' }
function Animal2 { Animal.call(this); this.age = 18 }
Animal2.prototype = Animal.prototype;
console.log(new Animal2())
//  :           ,             

//    
function Animal { this.name = 'pig' }
function Animal2 { Animal.call(this); this.age = 18 }
Animal2.prototype = Obiect.create(Animal.prototype);
Animal2.prototype.constructor = Animal2;
console.log(new Animal2())
//  :        ,      ,            


ES 6の継承
ES 6のclassはextendsキーワードで継承できます
class Point{
}
class ColorPoint extends Point{
  constructor(x, y, color) {
    super(x, y); //      constructor(x, y)
    this.color = color;
  }
}

注意:サブクラスはconstructorメソッドでsuperメソッドを呼び出す必要があります.そうしないと、インスタンスを新規作成するときにエラーが発生します.これは,子クラスが自分のthisオブジェクトを持たず,親クラスのthisオブジェクトを継承して加工するためである.superメソッドを呼び出さないと、サブクラスはthisオブジェクトを取得できません.
ES 5継承の本質は、まずサブクラスのインスタンスオブジェクトthisを作成し、次に親クラスのメソッドをthisに追加することである.ES 6の継承メカニズムはまったく異なり、実質的には親クラスのインスタンスオブジェクトthisを作成し(superメソッドを呼び出す必要がある)、次にサブクラスの構造関数でthisを変更します.