20170607-面向?qū)ο?2-繼承

lushan 發(fā)布于2019-08-20 17:05 / 2218人閱讀

摘要：繼承原型鏈原型鏈是實現(xiàn)繼承的主要方法。臨時的構(gòu)造函數(shù)將傳入的對象作為這個構(gòu)造函數(shù)的原型返回新實例以為原型創(chuàng)建一個新實例不僅屬于所有，而且也會被共享。上訴例子只調(diào)用了一次構(gòu)造函數(shù)，因此避免了在上面創(chuàng)建不必要的多余的屬性。

繼承 1 原型鏈

原型鏈是實現(xiàn)繼承的主要方法。其基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。

構(gòu)造函數(shù)、原型和實例的關(guān)系

每個構(gòu)造函數(shù)都有一個原型對象，原型對象都包含一個指向構(gòu)造函數(shù)的指針，而實例都包含一個指向原型對象的內(nèi)部指針。

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

function SubType(){
    this.subproperty = false;
}
// 使SubType繼承SuperType的實例 本質(zhì)是重寫原型對象
SubType.prototype = new SuperType();
SubType.prototype.getValue = function(){
    return this.subproperty;
}
var instance = new SubType();
alert(instance.getSuperValue());//true

注意：==instance.constructor現(xiàn)在指向的是SuperType,這是因為原來SubType的原型指向了另一個對象--SuperType的原型，而這個原型對象的constructor屬性指向的是SuperType==

默認的原型 Objec

確定原型與實例的關(guān)系

instanceof：用這個操作符來測試實例與原型鏈中出現(xiàn)過的構(gòu)造函數(shù)，結(jié)果就會返回true

alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true

使用isPrototypeOf()方法，只要是原型鏈中出現(xiàn)的原型，都可以說是該原型鏈所派生的實例的原型

alert(Object.prototype isPrototypeOf(instance)); //true
alert(SuperType.prototype isPrototypeOf(instance));
alert(SubType.prototype isPrototypeOf(instance));

通過原型鏈實現(xiàn)繼承時，不能使用對象字面量創(chuàng)建原型方法，因為這樣會重寫原型鏈

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

function SubType(){
    this.subproperty = false;
}
SubType.prototype = new SuperType();
// 使用對象字面量創(chuàng)建原型方法，會重寫原型鏈
SubType.prototype = {
    getSubValue: function(){
        return this.subproperty;
    }
};
var instance = new SubType();
alert(instance.getSuperValue());//error!!

原型鏈的問題

包含引用類型值的原型屬性會被所有實例共享，因此在構(gòu)造函數(shù)中定義屬性而不是在原型對象中定義屬性。
在通過原型來實現(xiàn)繼承時，原型實際上會變成另一個類型的實例。于是，原先的實例屬性也就變成了現(xiàn)在的原型屬性了。

function SuperType(){
    this.color = ["red", "blue", "green"];
    this.name = "Nicholas";
}
function SubType(){
}
SubType.prototype = new SuperType();

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

var instance2 = new SubType();
// colors是引用類型，會被所有實例共享
alert(instance2.colors); // "red","blue","green","black"
alert(instance2.name); //"Nicholas"

沒有辦法在不影響所有對象實例的情況下，給超類型的構(gòu)造函數(shù)傳遞參數(shù)

function SuperType(name){
    this.name = name;
}
function SubType(name){
}
// ??如何向超類型的構(gòu)造函數(shù)傳遞參數(shù)？？
SubType.prototype = new SuperType();

var instance2 = new SubType(name);

綜合以上情況，實踐中很少會多帶帶使用原型鏈

2.借用構(gòu)造函數(shù)

在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)。

function SuperType(){
    this.colors=["red","blue","green"];
}
function SubType(){
    //
    superType.call(this);
}

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

bar instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

使用這種方式，可以在子類型構(gòu)造函數(shù)中向超類型構(gòu)造函數(shù)傳遞參數(shù)。

function SuperType(name){
    this.name=name;
}
function SubType(){
    Super.call(this,"Nicholas");
    this.age = 29;
}

var instance = new SubType();
alert(instance.name);//"Nicholas"

相關(guān)問題：

會出現(xiàn)與構(gòu)造函數(shù)模式相同的問題——方法都在構(gòu)造函數(shù)中定義，函數(shù)復(fù)用就無從談起了。而且在超類型的原型中定義的方法，對于子類型也是不可見的。

3.組合繼承——JavaScrip最常用的繼承模式

使用原型鏈實現(xiàn)對原型屬性和方法的繼承(通過在原型上定義方法實現(xiàn)了函數(shù)復(fù)用)，通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承(保證每個實例都有自己的屬性，而且可以向超類的構(gòu)造函數(shù)傳遞參數(shù))。

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.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("Nicholas",29);
instance1.sayName(); //"Nicholas"
instance1.sayAge(); //29

var instance2 = new SubType("Greg",27);
instance2.sayName(); //"Greg"
instance2.sayAge(); //27

4 原型式繼承

借助原型可以基于已有的對象創(chuàng)建新對象，同時還不必因此創(chuàng)建自定義類型。

function object(o){
    // 臨時的構(gòu)造函數(shù)
    function F(){}
    // 將傳入的對象作為這個構(gòu)造函數(shù)的原型
    F.prototype = o;
    // 返回新實例
    return new F();
}
var person = {
    name:"Nicholas",
    friends:["shelby","court","van"]
};
// 以person為原型創(chuàng)建一個新實例
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"

person.friends不僅屬于person所有，而且也會被anotherPerson、yetAnotherPerson共享。

ECMAScript5通過Object.create()方法規(guī)范化了原型式繼承，這個方法接受兩個參數(shù)：一個用作新對象原型的對象，另一個(可選的)為新對象定義額外屬性的對象。只傳入一個參數(shù)的情況，和object()方法相同。

// Object.create()只用一個參數(shù)
var person = {
    name: "Nicholas",
    friends: ["shelby","court","van"]
};
var anotherPerson = Object.create(person);

// Object.create()用兩個參數(shù)
var person = {
    name: "Nicholas",
    friends: ["shelby","court","van"]
};
var anotherPerson = Object.create(person, {
    name:{
        value: "Greg"
    }
});
alert(anotherPerson.name); //Greg

var yetAnotherPerson = Object.create(person, {
    // 為新對象定義新的friends屬性，該屬性會覆蓋原型屬性中的friends
    friends:{
        value: ["1","2","3"]
    }
});
alert(yetAnotherPerson.friends); //"1,2,3"
// 但是原型對象中的friends屬性仍然被共享
alert(person.friends); //"shelby,court,van"
alert(anothorPerson.friends); //"shelby,court,van"

5.寄生式繼承

function createAnother(original){
    var clone = object(original);
    // 不能做到函數(shù)復(fù)用，導(dǎo)致效率降低
    // 添加新函數(shù)，增強對象
    clone.sayHi = function(){
        alert("hi");
    }
    return clone;
}

var person = {
    name: "Nicholas",
    friends: ["shelby","court","van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

6.寄生組合式繼承

組合繼承無論在什么情況下，都會調(diào)用兩次超類型構(gòu)造函數(shù)：一次是在創(chuàng)建子類型原型的時候，另一次是在子類型構(gòu)造函數(shù)內(nèi)部。

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);   //第二次調(diào)用SuperType()
    this.age=age;
}
SubType.prototype = new SuperType(); //第一次調(diào)用SuperType()

第一次調(diào)用SuperType構(gòu)造函數(shù)時，SubType.prototype(SubType的原型)會得到兩個屬性：name和colors。當調(diào)用SubType構(gòu)造函數(shù)時，又會調(diào)用一次SuperType構(gòu)造函數(shù)，這一次又在新對象上創(chuàng)建了實例屬性name和colors。于是這兩個屬性就屏蔽了原型中的兩個同名屬性

為了避免創(chuàng)建兩次相同的屬性，解決方法——寄生組合式繼承。其基本思想是：不必為了指定子類型的原型而調(diào)用超類型的構(gòu)造函數(shù)，我們所需要的無非就是超類型原型的一個副本而已。

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);
};

上訴例子只調(diào)用了一次SuperType構(gòu)造函數(shù)，因此避免了在SubType.prototype上面創(chuàng)建不必要的、多余的屬性。寄生組合式繼承是引用類型最理想的繼承范式
相比之下，第二段程序少了SubType.prototype = new SuperType();這使得SubType.prototype中沒有了name和colors屬性，實現(xiàn)了避免了在SubType.prototype上面創(chuàng)建不必要的、多余的屬性的目的。

GPU云服務(wù)器云服務(wù)器對象面向?qū)ο?/a> 面向?qū)ο?/a> 面向?qū)ο笏季S 面向?qū)ο筇匦?/a>

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83389.html

發(fā)表評論

登陸后可評論

0條評論

lushan

男|高級講師

我要關(guān)注我要私信

TA的文章

XXMhost：美國洛杉磯CN2 GIA雲(yún)服務(wù)器終身7折40元/月起（美國原生IP雲(yún)服務(wù)器）

閱讀 3779·2021-09-02 09:53
精選VPS主機優(yōu)惠信息動態(tài)-美國韓國日本香港VPS主機優(yōu)惠碼(持續(xù)更新)

閱讀 2758·2021-07-30 14:57
推薦輕量高效無依賴的開源JS插件和庫

閱讀 3504·2019-08-30 13:09
vscode 修改注釋顏色

閱讀 1206·2019-08-29 13:25
CSS的居中方式

閱讀 817·2019-08-29 12:28
微信樣式組件遇到的小坑

閱讀 1463·2019-08-29 12:26
通用 CSS 筆記、建議與指導(dǎo)

閱讀 1137·2019-08-28 17:58
在JavaScript中理解策略模式

閱讀 3316·2019-08-26 13:28

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

20170607-面向?qū)ο?2-繼承

相關(guān)文章

20170607-面向對象03-判斷對象類型的方法

20170607-面向對象01-創(chuàng)建對象

20170607-私有變量

從-1開始的ES6探索之旅02：小伙子，你對象咋來的？續(xù)篇 - 你的對象班（class）里來的？

JS對象(1)重新認識面向對象

發(fā)表評論

0條評論

lushan

男|高級講師

TA的文章

XXMhost：美國洛杉磯CN2 GIA雲(yún)服務(wù)器終身7折40元/月起（美國原生IP雲(yún)服務(wù)器）

精選VPS主機優(yōu)惠信息動態(tài)-美國韓國日本香港VPS主機優(yōu)惠碼(持續(xù)更新)

推薦輕量高效無依賴的開源JS插件和庫

vscode 修改注釋顏色

CSS的居中方式

微信樣式組件遇到的小坑

通用 CSS 筆記、建議與指導(dǎo)

在JavaScript中理解策略模式

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

20170607-面向?qū)ο?2-繼承

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！