ES 5とES 6継承

4360 ワード

1.ES 6継承
class Book{

	constructor(title,pages,isbn){
		this.title = title;
		this.pages = pages;
		this.isbn = isbn;
	}
	printIsbn(){
		console.log(this.isbn)
	}

}

class ITBook extends Book{

	constructor(title,pages,isbn,technology){
		super(title,pages,isbn);
		this.technology = technology;
	}

	printTechnology(){
		console.log(this.technology);
	}

}

let jsBook = new ITBook('JS','200','123','JavaSCript')
jsBook.title
"JS"
jsBook.printIsbn()
123
2.ES 5継承
Javascriptはプロトタイプチェーンの特性を利用して継承を実現しています.サブクラスの構造関数のプロトタイプを父親構造関数として使用した例で、サブクラス-サブタイプのプロトタイプ-親類に接続しました.プロトタイプチェーンの特徴は、層ごとに検索して、サブクラスからすべてのオブジェクトのプロトタイプObject.prototypeまで、属性方法を見つけたら検索を停止します.下の方の属性方法は上の方をカバーします.
1.プロトタイプチェーン継承
基本的なプロトタイプチェーンの継承過程は大体このようです.
//     ,    
function Super(){
    this.flag = true;
}
//       ,            
Super.prototype.getFlag = function(){
    return this.flag;
}
//    
function Sub(){
    this.subFlag = false;
}
//    
Sub.prototype = new Super;

//            ,          
Sub.prototype.getSubFlag = function(){
    return this.subFlag;
}
//    
var es5 = new Sub;
プロトタイプチェーンの実装は主にいくつかの問題があります.これは問題をもたらします.構造関数のプロトタイプ属性はすべての構造例で共有されていることを知っています.プロトタイプにおける属性の変化はすべてのインスタンスに反映されます.2、サブクラスのインスタンスを作成する場合、親の構造関数にパラメータを渡すことができません.
//                      ,                    
function Super(){
    this.flag = true;
}
function Sub(){
   this.subFlag = false;
}
Sub.prototype = new Super;
var obj = new Sub();
obj.flag = flase;  //    ,         ,               
var obj_2 = new Sub();
console.log(obj.flag)  //false;
以上の二つの問題を解決するために、構造関数を借りるという方法があります.
2.構造関数を借りる
サブ構造関数の内部でappyまたはcallを使用して親の関数を呼び出すだけで、属性継承を実現しながら、パラメータを伝達することができ、またインスタンスが互いに影響しないようにすることができます.
function Super(){
    this.flag = true;
}
function Sub(){
    Super.call(this)  //            ,         
}
var obj = new Sub();
obj.flag = flase;
var obj_2 = new Sub();
console.log(obj.flag)  //   true,      
callまたはapply方法により、実際には将来新しく作成されるSubTypeのインスタンスの環境でSuperTypeコンストラクタを呼び出しました.このように、SuperType関数で定義されたすべてのオブジェクト初期化コードは、新しいSubTypeオブジェクト上で実行されるので、各SubTypeの例には、自分のColorsオブジェクトのコピーがあります.
短所:1.方法はすべて構造関数で定義されています.関数は多重化できません.
3.コンビネーション引継ぎ
基本思想:プロトタイプチェーンと借用構造関数技術を組み合わせる.プロトタイプチェーンを用いてプロトタイプの属性と方法の継承を実現し,例の属性の継承を借用構造関数モードで実現した.このように、プロトタイプ上の定義方法によって関数多重化が実現されるとともに、各インスタンスに独自の属性があることを保証することができる.
function Supertype(name){
    this.name = name;
    this.colors = ["red","green","blue"];
}
​
Supertype.prototype.sayName = function(){
    console.log(this.name);
};
​
function Subtype(name,age){
    \\    
    Supertype.call(this,name);
    this.age  = age;
}
​
//    
Subtype.prototype = new Supertype();
Subtype.prototype.constructor = Subtype;
Subtype.prototype.sayAge = function(){
    console.log(this.age);
};
​
var instance1 = new Subtype('Annika',21);
instance1.colors.push("black");
//["red", "green", "blue", "black"]
console.log(instance1.colors); 
instance1.sayName(); //Annika
instance1.sayAge();  //21
​
var instance2 = new Subtype('Anna',22);
//["red", "green", "blue"]
console.log(instance2.colors);
instance2.sayName();   //Anna
instance2.sayAge();    //22
もう一つの例を見ます.
function Super(){
    this.flag = true;
}
Super.prototype.getFlag = function(){
    return this.flag;     //    
}
function Sub(){
    this.subFlag = flase
    Super.call(this)    //    
}
Sub.prototype = new Super;
//        ,Sub.prototype = new Super;    Sub.prototype constructor  Super;
//  constructor                   ,Sub.prototype Sub       ,          :Sub.prototype.constructor = Sub;
Sub.prototype.constructor = Sub;
var obj = new Sub();
Super.prototype.getSubFlag = function(){
    return this.flag;
}
短所:どのような状況でも二回の超構造関数を呼び出します.一回はサブタイプの原型を作る時、一回はサブタイプの構造関数の内部にあります.
プロトタイプの継承、寄生式の継承、寄生結合式の継承もあります.
参考できる:https://www.jianshu.com/p/342966fdf816 https://www.cnblogs.com/xiadongqing/p/6088252.html https://www.cnblogs.com/annika/p/9073572.html
https://blog.csdn.net/daydream13580130043/article/details/83830420 https://blog.csdn.net/wlk2064819994/article/details/81389161 https://www.cnblogs.com/chengzi/p/5623280.html https://blog.csdn.net/u013055396/article/details/79529736