JavaScript六種很是經典的對象繼承方式

1、原型鏈繼承

重點:利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。構造函數,原型,實例之間的關係:每一個構造函數都有一個原型對象,原型對象包含一個指向構造函數的指針,而實例都包含一個指向原型對象的內部指針。javascript

function SuperType(){
  this.property = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.property;
};

function SubType(){
  this.subproperty = false;
}
// 繼承自SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){
  return this.subproperty;
};

var example = new SubType();
alert(example.getSuperValue());//true

使用原型建立對象會存在多個實例對引用類型的操做會被篡改的問題,在上面一樣存在這個問題,以下:java

function SuperType(){
  this.colors = ["red", "blue", "green"];
}
function SubType(){}//即便沒有寫,也不會影響結果

SubType.prototype = new SuperType();

var example1 = new SubType();
example1.colors.push("black");
alert(example1.colors); //"red,blue,green,black"

var example2 = new SubType(); 
alert(example.colors); //"red,blue,green,black"

兩個實例對象example1和example2的colors屬性指向相同,改變一個會影響另外一個實例的屬性。app

缺點:
①原型鏈繼承多個實例的引用類型屬性指向相同,一個實例修改了原型屬性,另外一個實例的原型屬性也會被修改;
②不能傳遞參數;
③繼承單一。框架

2、借用構造函數繼承

重點:使用.call()和.apply()將父類構造函數引入子類函數,使用父類的構造函數來加強子類實例,等同於複製父類的實例給子類。函數

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

function SubType(name, age){
  // 繼承自SuperType
  SuperType.call(this, name);  
  this.age = age;
}

var example1 = new SubType("Mike", 23);
example1.colors.push("black");
alert(example1.colors);//"red,blue,green,black"

var example2 = new SubType();
alert(example2.colors);//"red,blue,green"

alert(example1.name); // "Mike"
alert(example1.age); // 23

借用構造函數繼承的重點就在於SuperType.call(this, name),調用了SuperType構造函數,這樣,SubType的每一個實例都會將SuperType中的屬性複製一份。性能

缺點:
①只能繼承父類的實例屬性和方法,不能繼承原型屬性/方法;
②沒法實現構造函數的複用,每一個子類都有父類實例函數的副本,影響性能,代碼會臃腫。學習

3、組合繼承

重點:將原型鏈繼承構造函數繼承這兩種模式的優勢組合在一塊兒,經過調用父類構造,繼承父類的屬性並保留傳參,而後經過將父類實例做爲子類原型,實現函數複用。this

其背後的思路是使用原型鏈實現對原型屬性和方法的繼承,而經過借用構造函數來實現對實例屬性的繼承,這樣,既經過在原型上定義方法實現了函數複用,又能保證每一個實例都有它本身的屬性。prototype

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(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(){
    alert(this.age);
};

var example1 = new SubType("Mike", 23);
example1.colors.push("black");
alert(example1.colors); //"red,blue,green,black"
example1.sayName(); //"Mike";
example1.sayAge(); //23

var example2 = new SubType("Jack", 22);
alert(example2.colors); //"red,blue,green"
example2.sayName(); //"Jack";
example2.sayAge(); //22

缺陷:
父類中的實例屬性和方法既存在於子類的實例中,又存在於子類的原型中,不過僅是內存佔用,所以,在使用子類建立實例對象時,其原型中會存在兩份相同的屬性/方法。-------這個方法是javascript中最經常使用的繼承模式指針

4、 原型式繼承

重點:用一個函數包裝一個對象,而後返回這個函數的調用,這個函數就變成了個能夠隨意增添屬性的實例或對象。object.create()就是這個原理,直接將某個對象直接賦值給構造函數的原型。

function object(obj){
  function O(){}
  O.prototype = obj;
  return new O();
}

object()對傳入其中的對象執行了一次淺複製,將O的原型直接指向傳入的對象。

var person = {
  name: "Mike",
  friends: ["Jack", "Tom", "Joes"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Peter");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("BoBo");

alert(person.friends);   //"Jack,Tom,Joes,Peter,BoBo"

ECMAScript5經過新增Object.create()方法規範化了原型式繼承,這個方法接收兩個參數:一個用做新對象原型的對象和一個做爲新對象定義額外屬性的對象。

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

缺點:
①原型鏈繼承多個實例的引用類型屬性指向相同(全部實例都會繼承原型上的屬性),存在篡改的可能;
②沒法傳遞參數,沒法實現複用。(新實例屬性都是後面添加的)。

5、寄生式繼承

重點:建立一個僅用於封裝繼承過程的函數,該函數在內部以某種方式來加強對象,最後返回構造函數。(就像給原型式繼承外面套了個殼子,而後return出來)

function createAnother(original){ 
  varclone=object(original); // 過調用函數建立一個新對象
  clone.sayHi = function(){ // 以某種方式加強這個對象
    alert("hi");
  };
  return clone; // 返回對象
}

函數的主要做用是爲構造函數新增屬性和方法,以加強函數。

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

缺點:
①原型鏈繼承多個實例的引用類型屬性指向相同,存在篡改的可能;
②沒法傳遞參數,沒用到原型,沒法複用。

6、寄生組合式繼承

重點:經過借用構造函數傳遞參數和寄生模式實現繼承屬性,經過原型鏈的混成形式來繼承方法,在函數中用apply或者call引入另外一個構造函數,可傳參。

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); //Object.create建立對象
  prototype.constructor = subType;                    // 加強對象
  subType.prototype = prototype;                      // 指定對象
}

// 父類初始化實例屬性和原型屬性
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

// 借用構造函數傳遞加強子類實例屬性(支持傳參和避免篡改)
function SubType(name, age){
  SuperType.call(this, name);
  this.age = age;
}

// 將父類原型指向子類
inheritPrototype(SubType, SuperType);

// 新增子類原型屬性
SubType.prototype.sayAge = function(){
  alert(this.age);
}

var example1 = new SubType("abc", 21);
var example2 = new SubType("def", 22);

example1.colors.push("pink"); // ["red", "blue", "green", "pink"]
example1.colors.push("black"); // ["red", "blue", "green", "black"]

寄生組合繼承集合了前面幾種繼承優勢,幾乎避免了上面繼承方式的全部缺陷,是執行效率最高也是應用面最廣的。

缺點:
實現的過程相對繁瑣。

爲何要學習這些繼承方式,明明能夠直接繼承爲何還要搞這麼麻煩?主要是爲了學習它們的思想,打下更好的基礎,爲之後閱讀框架源碼,或本身封裝組件甚至框架大有益處。

時間有點匆忙,沒有加上ES6的extends,有空再補上。

相關文章
相關標籤/搜索