JS的繼承方法--案例說明

一、原型鏈：利用原型讓一個引用型別繼承另一個引用型別的屬性和方法

        每個建構子都有一個原型對象，原型對像都包含一個指向建構函數的指針，而實例都包含一個指向原型物件的內部指針。

實作原性鏈的基本模式：

function SuperType(){
    this.colors =[“red”, “blue”, “green”];
}
function SubType(){
}
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

最後的結果：intance指向SubType的原型，而SubType的原型又指向SuperType的原型，SuperType繼承了Object

#所有函數的預設原型都是Object的實例

        問題：會產生引用型別值的問題

        例如，創建了一個子類別的實例，如果對子類別實例的屬性進行了修改，那麼建立其他子類別的時候都會收到影響，程式碼如下：

function SuperType(){
    this.colors =[“red”, “blue”, “green”];
}
function SubType(){
}
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

 以上結果說明會影響其他實例的屬性值

     二、借用建構子：在子型別建構子的內部呼叫超型別建構子

function SuperType(){
    this.colors =[“red”, “blue”, “green”];
}
function SubType{}(
   SuperType.call(this);     //继承了SuperType。通过调用SuperType的构造函数，借用其构造结构
}
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(intance1.colors);     //red,blue,green,black
var instance2 = new SubType();
alert(instance2.colors);   //red,blue,green

 使用此方法可以在子類別建構子中傳遞參數給超類型建構函數，如下：

function SuperType(name){
    this.name = name;
}
function SubType(){
SuperType.call(this,“Nicholas”);        //传入参数，利用这个参数初始化父类构造函数中的name
this.age = 29;
}
var instance = new SubType();
alert(instance.name);   //Nicholas
alert(instance.age);   //29

問題：不方便復用

        三、組合式繼承：使用原型鏈實現對原型屬性和方法的繼承，而藉由借用建構函數來實現對實例屬性的繼承

        範例程式碼：

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指SubType，
this.age = age;    //自己新定义的属性age也可以进行赋值
}
SubType.prototype = new SuperType();     //利用原型继承，可以使用父类的方法（见原型链继承）
SubType.prototype.sayAge = function(){   //定义SubType特有的新方法
    alert(this.age);
}
var instance1 = new SubType(“Martin”, 10);
instance1.colors.push(“black”);
alert(instance1.colors);  //red,blue,green,black
instance1.sayName();   //Martin
instance1.sayAge();  //10
var instance2 = new SubType(“Greg”, 27);
alert(instance2.colors);   //red,blue,green
instance2.sayName();  //Greg
instance2.sayAge();  //27

相關建議：

JS中的繼承方式實例詳解

# JS實作繼承的幾種方式

以上是JS的繼承方法--案例說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！