學習javascript物件導向 javascript實作繼承的方式

本文實例為大家介紹了javascript實作繼承的6種方式，分享給大家供大家參考，具體內容如下

1、【原型鏈繼承】實現的本質是重寫原型對象，並以一個新類型的實例取代。實際上不是SubType的原型的constructor屬性被重寫了，而是SubType的原型指向了另一個物件－SuperType的原型，而這個原型物件的construtor屬性指向的是SuperType

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 instance = new SubType();
alert(instance.getSuperValue());//true

登入後複製

[注意1]謹慎定義方法，給原型添加方法的程式碼一定要放在替換原型的語句之後

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;
}
//重写超类型的方法
SubType.prototype.getSuperValue = function(){
 return false;
}
var instance = new SubType();
alert(instance.getSuperValue());//false

登入後複製

[注意2]透過原型鏈實現繼承時，不能使用物件字面量來建立原型方法，這樣做會重寫原型鏈

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;
 },
 someOtherMethod : function(){
  return false;
 }
};
var instance = new SubType();
alert(instance.getSuperValue());//error

登入後複製

[缺點1]在建立子類型的實例時，不能傳遞參數給超類型的建構函
[缺點2]包含引用類型值的原型屬性會被所有實例共用

function SuperType(){
 this.colors = ['red','blue','green'];
}
function SubType(){}
//继承了SuperType
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push('black');
alert(instance1.colors);//'red,blue,green,black'
var instance2 = new SubType();
alert(instance2.colors);//'red,blue,green,black'

登入後複製

2、【借用建構子繼承(又叫偽造物件或經典繼承)】在子類型建構函數的內部呼叫超類型建構函數，因此透過使用apply()和call()方法也可以在將來新建的物件上執行建構子

function SuperType(){
 this.colors = ['red','blue','green'];
}
function SubType(){
 //继承了SuperType
 SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push('black');
alert(instance1.colors);//'red,blue,green,black'
var instance2 = new SubType();
alert(instance2.colors);//'red,blue,green'

登入後複製

[優點]傳遞參數

function SuperType(name){
 this.name = name;
}
function SubType(){
 //继承了SUperType,同时还传递了参数
 SuperType.call(this,"Nicholas");
 //实例属性
 this.age = 29;
}
var instance = new SubType();
alert(instance.name);//"Nicholas"
alert(instance.age);//29

登入後複製

[注意]為了確保SuperType建構子不會重寫子類型的屬性，可以在呼叫超類型建構函式後，再加入子類型中應該定義的屬性

function SuperType(name){
 this.name = name;
 this.age = 30;
}
function SubType(){
 //实例属性
 this.age = 29;
 //继承了SUperType,同时还传递了参数
 SuperType.call(this,"Nicholas");
}
var instance = new SubType();
//实例属性被重写为SuperType构造函数的属性
alert(instance.age);//30

登入後複製

[缺點1]無法實作函數重複使用
[缺點2]在超型別的原型中定義的方法，對子型別而言也是不可見的，結果所有型別都只能使用建構子模式
3、【組合繼承(又叫偽經典繼承)】將原型鍊和借用構造函數的技術組合在一起，從而發揮二者之長的一種繼承模式。背後的想法是使用原型鏈實現對原型屬性和方法的繼承，而藉由借用建構函式來實現實例屬性的繼承。這樣，既透過在原型上定義方法實現了函數復用，又能夠保證每個實例都有它自己的屬性，成為JavaScript中最常用的繼承模式。

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 instance1 = new SubType("Nicholas",29);
instance1.colors.push("black");
alert(instance1.colors);//'red,blue,green,black'
instance1.sayName();//"Nicholas"
instance1.sayAge();//29
var instance2 = new SubType("Greg",27);
alert(instance2.colors);//'red,blue,green'
instance2.sayName();//"Greg"
instance2.sayAge();//27

登入後複製

[缺點]無論在什麼情況下，都會呼叫兩次超類型建構函式:一次是在建立子型別原型的時候，另一次是在子型別建構函式內部。子類型最終會包含超類型物件的全部實例屬性，但不得不在呼叫子類型建構函式時重寫這些屬性。

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); // 第二次调用SuperType()
 this.age = age;
}
SubType.prototype = new SuperType(); //第一次调用SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
 alert(this.age);
};

登入後複製

4、【原型式繼承】借助原型可以基於已有的對象創建新對象，同時還不必因此創建自訂類型。從本質上講，object()對傳入其中的物件執行了一次淺複製。
[注意]原型式繼承要求必須有一個物件可以作為另一個物件的基礎，如果有這麼一個物件的話，可以把它傳遞給object()函數，然後再根據具體需求對得到的物件加以修改即可

function object(o){
  function F(){};
  F.prototype = o;
  return new F();
}
var person = {
  name: "Nicholas",
  friends: ["Shelby","Court","Van"]
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

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

alert(person.friends);//"Shelby,Court,Van,Rob,Barbie"

登入後複製

【4.1】【Object.create()方法】：ECMAScript5新增Object.create()方法規範化了原型式繼承。這個方法接收兩個參數:一個用作新物件原型的物件和(可選的)一個為新物件定義額外屬性的物件。在傳入一個參數情況下，Object.create()與object()方法的行為相同

function object(o){
 function F(){};
 F.prototype = o;
 return new F();
}
var person = {
 name: "Nicholas",
 friends:["Shelby","Court","Van"]
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends);//"Shelby,Court,Van,Rob,Barbie"

登入後複製

[注意]Object.create()方法的第二個參數與Object.defineProperties()方法的第二個參數格式相同:每個屬性都是透過自己的描述符定義的。以這種方式指定的任何屬性都會覆寫原型物件上的同名屬性。

var person = {
 name: "Nicholas",
 friends:["Shelby","Court","Van"]
};
var anotherPerson = Object.create(person,{
 name: {
  value: "Greg"
 }
});
alert(anotherPerson.name);//"Greg"

登入後複製

【4.2】低版瀏覽器下相容於Object.create()方法

if(typeof Object.create != "function"){
 (function(){
  var F = function(){};
  Object.create = function(o){
   if(arguments.length > 1){
    throw Error('Second argument noe supported');
   }
   if(o === null){
    throw Error("Cannot set a null [[Prototype]]");
   }
   if(typeof o != 'Object'){
    throw TypeError("Arguments must be an object");
   }
   F.prototype = o;
   return new F();
  }
 })();
}

登入後複製

5、【寄生式繼承】創建一個僅用於封裝繼承過程的函數，該函數在內部以某種方式來增強對象，最後再像真的是它做了所有工作一樣回傳物件
[缺點]無法實作函數重複使用

function object(o){
 function F(){};
 F.prototype = o;
 return new F();
}
function createAnother(original){
 var clone = 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、【寄生組合式繼承】藉由借用建構函式來繼承屬性，透過原型鏈的混成形式來繼承方法。背後的基本想法是：不必為了指定子類型的原型而呼叫超類型的建構函數，所需的無非就是超類型原型的一個副本而已。本質上，就是使用寄生式繼承來繼承超類型的原型，然後再將結果指定給子類型的原型。寄生組合式繼承是引用型別最理想的繼承範式。

//这个例子中的高效率体现在它只调用了一次Super构造函数，并且因此避免了在SubType.prototype上面创建不必要的、多余的属性。与此同时，原型链还能保持不变。
function object(o){
 function F(){};
 F.prototype = o;
 return new F();
}
function inheritPrototype(subType,superType){
 var prototype = object(superType.prototype);//创建对象
 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);
}

登入後複製

以上就是本文的全部內容，javascript實現繼承的方式，感謝大家的閱讀，小編會再接再厲！

學習javascript物件導向 javascript實作繼承的方式_javascript技巧