Es 5の継承実装

2295 ワード

Es 6ではclassで直接継承を実現できるが,どうしてes 5はなく,他の方法で継承を実現するしかない.

プロトタイプチェーン実装

function Super(){
  this.num=[1,2,3]
}
Super.prototype.show=function(){
  console.log('show')
}
function Child(){}

Child.prototype=new Super();
var c1=new Child();

プロトタイプチェーン継承の実装は上述の通りであり、最も重要なのはプロトタイプオブジェクトChild.prototype=new Super();を書き換えることである.

欠点


プロトタイプの参照タイプが書き換えられると、他のオブジェクトは書き換えられます.
c1.num[0]=13
console.log(c1)  //13
var c2=new Child();
console.log(c2)  //13

コンストラクタ実装


function Super(){
  this.name='ss1'
}

function Child(){
  this.age=1;
  Super.call(this)
}
var a=new Child();
console.log(a.name)  //ss1

グループ継承


コンストラクション関数とプロトタイプチェーンの組合せにより継承する方法
function Super(){
  this.name='ss1'
}

Super.prototype.getName=function () {
  console.log('my name is ???')
}

function Child(){
  this.age=1;
  // 
  Super.call(this)
}
// 
Child.prototype=new Super();
var a=new Child();
console.log(a.name)  //ss1
a.getName();   //my name is ???

他にも2種類あるので、時間があればまた書きます~~~
転載先:https://juejin.im/post/5c7d1e65e51d4541af3016a9