經(jīng)典原型鏈、繼承解析

yiliang 發(fā)布于2019-08-21 18:25 / 1194人閱讀

摘要：原型我們知道任何一個(gè)函數(shù)都存在一個(gè)屬性，他是個(gè)對(duì)象，這個(gè)對(duì)象我們就叫他原型對(duì)象這個(gè)原型對(duì)象本身也自帶兩個(gè)屬性和這個(gè)屬性是指向創(chuàng)建此對(duì)象的構(gòu)造函數(shù)的引用，構(gòu)造函數(shù)的實(shí)例化對(duì)象，也可以通過屬性來訪問構(gòu)造它的那個(gè)函數(shù)這個(gè)屬性指向創(chuàng)建此對(duì)象的構(gòu)造函

原型

我們知道任何一個(gè)函數(shù)都存在一個(gè)prototype屬性，他是個(gè)對(duì)象，這個(gè)對(duì)象我們就叫他原型對(duì)象
這個(gè)原型對(duì)象本身也自帶兩個(gè)屬性：constructor 和 proto

constructor: 這個(gè)屬性是指向創(chuàng)建此對(duì)象的構(gòu)造函數(shù)的引用，構(gòu)造函數(shù)的實(shí)例化對(duì)象，也可以通過constuctor屬性來訪問構(gòu)造它的那個(gè)函數(shù)_proto_: 這個(gè)屬性指向創(chuàng)建此對(duì)象的構(gòu)造函數(shù)的prototype原型對(duì)象的引用

  例子：
//我的家族姓莫
function Parent(){
    this.name = "mo"
}
//我家族是音樂世家
 Parent.prototype.work = function(){
     return "musicing"
 }
 
 //爸媽生了我
 var me = new Parent()

 //我也要唱歌
 console.log(me.work())   //=>musicing

 //爸爸媽媽又生了二胎
 var myBrother = new Parent()

 //他也會(huì)唱歌
 console.log(myBrother.work())  //=>musicing

 //證明我兩是否是親生的
 console.log(me.work() === myBrother.work())  //=>true

解釋一波：
    me 和 myBrother 是構(gòu)造函數(shù)Parent()new出來的的一個(gè)實(shí)例，me 和 myBrother 都有一個(gè)隱式屬性_proto_，引用Parent() 的prototype屬性來得到繼承

原型鏈

在訪問 me 的 work 方法時(shí)，找不到，就會(huì)順著_protp_屬性往上在構(gòu)造函數(shù)的prototype找，找到了就停止，沒找到繼續(xù)往上到Object.prototype找，再?zèng)]找到就到null了，自然也找不到就只能返回undifined，這種鏈?zhǔn)降囊镁褪窃玩?，通過原型鏈實(shí)現(xiàn)繼承還是很方便的

萬一原型鏈斷鏈呢？
原因：如果對(duì) 構(gòu)造函數(shù) 或者 原型鏈 修改一些方法或者屬性的時(shí)候，導(dǎo)致函數(shù)的constructor不等于創(chuàng)建它的構(gòu)造函數(shù)，那就會(huì)斷鏈

如果先實(shí)例再通過字面量添加或修改，那么后新定義的方法就對(duì)先繼承的方法或?qū)傩跃蜁?huì)不在生效，就會(huì)斷鏈，這是因?yàn)樽置媪縼硇薷脑蜁r(shí)，constructor發(fā)生了改變，也就是說該函數(shù)指向的創(chuàng)建該函數(shù)的構(gòu)造函數(shù)發(fā)生了改變，字面量默認(rèn)的constructor的值是Object(),所以為了避免斷鏈，盡量不要使用字面量重新賦值，修改

 例子：
 //創(chuàng)建一個(gè)構(gòu)造函數(shù)Car
function Car(){
 this.brand = "大奔";
}
//大奔 80萬
Car.prototype.price = "80";

//我來買一個(gè)大奔 先實(shí)例
var benCar1 = new Car();
console.log(benCar1.price)  //=>80

//我希望我的大奔 帶有翅膀的 能飛
Car.prototype = {
 hasWing: true,
 hasFlying: function(){
     console.log("flying...")
 }
}

var benCar = new Car()

(1) 正常情況下 
console.log(benCar1.brand,benCar1.price,benCar1.hasWing,benCar1.hasFlying,benCar1.constructor)
 //=> 大奔 80 undefined undefined  ? Car(){}

(2)字面量添加屬性方法時(shí)
console.log(benCar.brand,benCar.price,benCar.hasWing,benCar.hasFlying,benCar.constructor) 
//=> 大奔 undefined true ? (){} ? Object() { [native code] }

繼承的幾種方式

(1) 原型鏈繼承

原型鏈繼承是通過 new實(shí)例化構(gòu)造函數(shù) 賦給子類的原型， 其實(shí)實(shí)例的子類本身是完全的空對(duì)象，所有的屬性方法都需要去原型鏈上找。

例子:

function Grandpa(){
    this.name = "mo"
}
Grandpa.prototype.work = function(){
     return "musicing"
 }
 function Parent(){

}
Parent.prototype = new Grandpa()

 var me = new Parent()
 console.log(me.work())   //=>musicing 我找啊找啊原來是Grandpa會(huì)musicing
 var myBrother = new Parent()
 console.log(myBrother.work())  //=>musicing

 console.log(me.work() === myBrother.work())  //=>true

(2) 構(gòu)造函數(shù)繼承

構(gòu)造函數(shù)繼承 通過apply去調(diào)用父類的構(gòu)造函數(shù)，達(dá)到繼承父類的實(shí)例屬性，對(duì)，只能繼承屬性，要想繼承方法 采用寄生組合繼承

例子
function Grandpa(firstname){
    this.name = "mo " + firstname
}
Grandpa.prototype.work = function(){
     return "musicing"
 }
 function Parent(firstname){
    Grandpa.apply(this, arguments)
}
Parent.prototype = new Grandpa()

 var me = new Parent("alice")
 console.log(me.work())   //=>musicing
 var myBrother = new Parent("bob")
 console.log(myBrother.work())  //=>musicing

 console.log(me.work() === myBrother.work())  //=>true
 console.log(me.name, myBrother.name,me.name === myBrother.name)//=>mo alice ,mo bob ,false

(3) 寄生組合繼承

寄生組合繼承是我們經(jīng)常要用到的，組合了原型和構(gòu)造函數(shù)，結(jié)合Object.create(obj),方法對(duì)傳入的對(duì)象進(jìn)行淺拷貝，這樣可以實(shí)現(xiàn)對(duì)實(shí)例屬性和原型屬性分別進(jìn)行繼承

淺拷貝：僅僅是指向被拷貝的內(nèi)存地址，如果原地址中對(duì)象被改變了，那么淺拷貝出來的對(duì)象也會(huì)相應(yīng)改變

例子：
// 寄生組合繼承
function Grandpa(firstname){
    this.name = "mo " + firstname
}
Grandpa.prototype.work = function(){
     return "musicing"
 }
 function Parent(firstname){
    Grandpa.apply(this, arguments)
}
// Parent.prototype = new Grandpa()
//改成
Parent.prototype = Object.create(Grandpa.prototype); // Object.create()將父級(jí)對(duì)象的屬性和方法進(jìn)行引用
Parent.prototype.constructor = Parent;  //將該函數(shù)的construnctor指向parent構(gòu)造函數(shù)
console.log(Parent.prototype)

 var me = new Parent("alice")
 var myBrother = new Parent("bob")

 console.log(me.work() === myBrother.work())  //=>true
console.log(me.name, myBrother.name,me.name === myBrother.name)//=>mo alice ,mo bob ,false

好了，有時(shí)間還會(huì)補(bǔ)充...

GPU云服務(wù)器云服務(wù)器原型鏈繼承 js原型鏈的繼承原型繼承原型原型鏈

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

yiliang

男|高級(jí)講師

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

TA的文章

『學(xué)了就忘』Linux軟件包管理 — 45、yum源文件詳細(xì)說明

閱讀 2709·2021-11-17 17:00
Vue devtools工具安裝 Chrome安裝Vue devtools 教程步驟

閱讀 1990·2021-10-11 10:57
ReliableSite：美國服務(wù)器租用(紐約/邁阿密/洛杉磯);E5-1650v3/128GB/2

閱讀 3816·2021-09-09 11:33
一篇文章帶你了解如何用Planting 為測(cè)試工程師開發(fā)的部署框架

閱讀 1002·2021-09-09 09:33
BFC深入理解

閱讀 3601·2019-08-30 14:20
好用的sublime text 插件(有空的時(shí)候持續(xù)更新)

閱讀 3405·2019-08-29 11:25
nginx 常用命令

閱讀 2861·2019-08-26 13:48
javascript高級(jí)程序設(shè)計(jì)（第三版）學(xué)習(xí)摘錄下

閱讀 804·2019-08-26 11:52

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

資訊專欄INFORMATION COLUMN

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

經(jīng)典原型鏈、繼承解析

相關(guān)文章

**前端面試經(jīng)典題目匯總（持續(xù)更新中）**

**前端面試經(jīng)典題目匯總（持續(xù)更新中）**

**前端面試經(jīng)典題目匯總（持續(xù)更新中）**

**JavaScript六種非常經(jīng)典的對(duì)象繼承方式**

JavaScript系列--淺析原型鏈與繼承

發(fā)表評(píng)論

0條評(píng)論

yiliang

男|高級(jí)講師

TA的文章

『學(xué)了就忘』Linux軟件包管理 — 45、yum源文件詳細(xì)說明

Vue devtools工具安裝 Chrome安裝Vue devtools 教程步驟

ReliableSite：美國服務(wù)器租用(紐約/邁阿密/洛杉磯);E5-1650v3/128GB/2

一篇文章帶你了解如何用Planting 為測(cè)試工程師開發(fā)的部署框架

BFC深入理解

好用的sublime text 插件(有空的時(shí)候持續(xù)更新)

nginx 常用命令

javascript高級(jí)程序設(shè)計(jì)（第三版）學(xué)習(xí)摘錄下

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

經(jīng)典原型鏈、繼承解析

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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

經(jīng)典原型鏈、繼承解析