[JS]繼承方式總結

標籤：nts   span   原型鏈   prot   參考   避免   issues   基礎   總結   

方式一：原型鏈繼承（prototype模式）

 

  
function Animal(){
  
 this.species = "動物";
  
}
  
function Cat(name,color){
  
 this.name = name;
  
 this.color = color;
  
}
  

  
Cat.prototype = new Animal();//核心
  
Cat.prototype.constructor = Cat;
 

缺點：
1.原型上的參考型別的屬性和方法被所有執行個體共用（個人覺得這不應該算缺點，畢竟原型就是派這個用處的）
2.建立Cat的執行個體時，無法向Animal傳參

方式二：經典繼承（建構函式綁定）

 

  
function Animal(){
  
 this.species = "動物";
  
}
  
function Cat(name,color){
  
 Animal.call(this);//核心，或Animal.apply(this,arguments);
  
 this.name = name;
  
 this.color = color;
  
}
 

優點：
1.避免了參考型別的屬性和方法被所有執行個體共用，因為根本沒用到原型嘛
2.建立Cat的執行個體時，可以向Animal傳參

缺點：
1.屬性和方法都在建構函式中定義，每次建立執行個體都會建立一遍屬性和方法

方式三：組合繼承（原型鏈繼承和經典繼承雙劍合璧）

 

  
function Parent (name) {
  
 this.name = name;
  
 this.colors = [‘red‘, ‘blue‘, ‘green‘];
  
}
  

  
Parent.prototype.getName = function () {
  
 console.log(this.name)
  
}
  

  
function Child (name, age) {
  

  
 Parent.call(this, name);//核心
  

  
 this.age = age;
  

  
}
  

  
Child.prototype = new Parent();//核心
  

  
var child1 = new Child(‘kevin‘, ‘18‘);
  

  
child1.colors.push(‘black‘);
  

  
console.log(child1.name); // kevin
  
console.log(child1.age); // 18
  
console.log(child1.colors); // ["red", "blue", "green", "black"]
  

  
var child2 = new Child(‘daisy‘, ‘20‘);
  

  
console.log(child2.name); // daisy
  
console.log(child2.age); // 20
  
console.log(child2.colors); // ["red", "blue", "green"]
 

優點：
1.融合原型鏈繼承和建構函式的優點融合原型鏈繼承和建構函式的優點

缺點：
1.兩次調用Parent建構函式，在Child.prototype上增加了額外、不需要的屬性，還破壞了原型鏈

方式四：寄生組合繼承

 

  
function Parent (name) {
  
 this.name = name;
  
 this.colors = [‘red‘, ‘blue‘, ‘green‘];
  
}
  

  
Parent.prototype.getName = function () {
  
 console.log(this.name)
  
}
  

  
function Child (name, age) {
  
 Parent.call(this, name);//核心
  
 this.age = age;
  
}
  

  
Child.prototype = Object.create(Parent.prototype);//核心
  
Child.prototype.constructor = Child;
  

  
var child1 = new Child(‘kevin‘, ‘18‘);
  

  
console.log(child1)
 

優點：在組合繼承的基礎上，避免了在 Child.prototype 上面建立不必要的、多餘的屬性。與此同時，原型鏈還能保持不變；因此，還能夠正常使用 instanceof 和 isPrototypeOf

參考連結：
https://github.com/mqyqingfeng/Blog/issues/16
http://www.ayqy.net/blog/%E9%87%8D%E6%96%B0%E7%90%86%E8%A7%A3js%E7%9A%846%E7%A7%8D%E7%BB%A7%E6%89%BF%E6%96%B9%E5%BC%8F/
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html

[JS]繼承方式總結