javascript原型鏈學(xué)習(xí)記錄之繼承實(shí)現(xiàn)方式分析
本文實(shí)例講述了javascript原型鏈學(xué)習(xí)記錄之繼承實(shí)現(xiàn)方式。分享給大家供大家參考,具體如下:
在慕課網(wǎng)學(xué)習(xí)繼承的筆記:
繼承的幾種方式:
① 使用構(gòu)造函數(shù)實(shí)現(xiàn)繼承
function Parent(){ this.name = 'parent'; } function Child(){ Parent.call(this); //在子類函數(shù)體里面執(zhí)行父類的構(gòu)造函數(shù) this.type = 'child';//子類自己的屬性 }
Parent.call(this)
,this即實(shí)例,使用this執(zhí)行Parent方法,那么就用this.name = 'parent'
把屬性
掛載在了this(實(shí)例)上面,以此實(shí)現(xiàn)了繼承。
缺點(diǎn):以上只是讓Child得到了Parent上的屬性,Parent的原型鏈上的屬性并未被繼承。
② 使用原型鏈實(shí)現(xiàn)繼承
function Parent(){ this.name = 'parent'; } function Child(){ this.type = 'child'; } Child.prototype = new Parent();
解釋:Child.prototype === Chlid實(shí)例的__proto__ === Child實(shí)例的原型
所以當(dāng)我們引用new Child().name
時(shí),Child上沒有,然后尋找Child的原型child.__proto__
即Child.prototype
即new Parent()
,Parent的實(shí)例上就有name屬性,所以Child實(shí)例就在原型鏈上找到了name屬性,以此實(shí)現(xiàn)了繼承。
缺點(diǎn):可以看出,Child的所有實(shí)例,它們的原型都是同一個(gè),即Parent的實(shí)例:
var a = new Child(); var b = new Child(); a.__proto === b.__proto__; //true
所以,當(dāng)使用 a.name = 'a'重新給name賦值時(shí),b.name也變成了'a',反之亦然。
用instanceof和constructor都無法確認(rèn)實(shí)例到底是Child的還是Parent的。
③ 結(jié)合前兩種取長補(bǔ)短
function Parent(){ this.name = 'parent'; } function Child(){ Parent.call(this); this.type = 'child'; } Child.prototype = new Parent();
缺點(diǎn):在Child()里面用Parent.call(this);
執(zhí)行了一次Parent(),然后又使用Child.prototype = new Parent()
執(zhí)行了一次Parent()。
改進(jìn)1:
function Parent(){ this.name = 'parent'; } function Child(){ Parent.call(this); this.type = 'child'; } Child.prototype = Parent.prototype;
缺點(diǎn):用instanceof和constructor都無法確認(rèn)實(shí)例到底是Child的還是Parent的。
原因: Child.prototype = Parent.prototype
直接從Parent.prototype
里面拿到constructor,即Parent。
改進(jìn)2:
function Parent(){ this.name = 'parent'; } function Child(){ Parent.call(this); this.type = 'child'; } Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child;
畫圖說明吧:
var a = new Child();
所以這樣寫我們就構(gòu)造出了原型鏈。
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
- [js高手之路]原型式繼承與寄生式繼承詳解
- Javascript中類式繼承和原型式繼承的實(shí)現(xiàn)方法和區(qū)別之處
- js類式繼承與原型式繼承詳解
- JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之構(gòu)造函數(shù)+原型鏈混合方式的使用詳解
- JS繼承--原型鏈繼承和類式繼承
- javascript學(xué)習(xí)筆記(九)javascript中的原型(prototype)及原型鏈的繼承方式
- JavaScript原型式繼承實(shí)現(xiàn)方法
相關(guān)文章
細(xì)述Javascript的加法運(yùn)算符的具體使用
這篇文章主要介紹了細(xì)述Javascript的加法運(yùn)算符的具體使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10JavaScript中實(shí)現(xiàn)map功能代碼分享
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)map功能代碼分享,本文直接給出實(shí)現(xiàn)代碼,給出一個(gè)MAP類,類中包含大多數(shù)的常用方法,還可以自己擴(kuò)展,需要的朋友可以參考下2015-06-06webpack構(gòu)建打包的性能優(yōu)化實(shí)戰(zhàn)指南
webpack是前端開發(fā)中比較常用的打包工具之一,另外還有g(shù)ulp,grunt,下面這篇文章主要給大家介紹了關(guān)于webpack構(gòu)建打包的性能優(yōu)化的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03JavaScript中html畫布的使用與頁面存儲(chǔ)技術(shù)詳解
這篇文章主要介紹了JavaScript中html畫布的使用與頁面存儲(chǔ)技術(shù),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08JS中數(shù)據(jù)類型的正確判斷方法實(shí)例
怎么去判斷一個(gè)數(shù)據(jù)屬于哪個(gè)數(shù)據(jù)類型,這個(gè)是很常見的操作,我們一般都會(huì)想到typeof和instanceof這兩個(gè)常見的方法,但有時(shí)候這兩種方法并不能滿足我們的需求,下面這篇文章主要給大家介紹了關(guān)于JS中數(shù)據(jù)類型的正確判斷方法,需要的朋友可以參考下2021-08-08JavaScript forEach()遍歷函數(shù)使用及介紹
這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個(gè)方法技巧,需要的朋友可以參考下2015-07-07微信小程序圖片選擇區(qū)域裁剪實(shí)現(xiàn)方法
本篇文章主要介紹了微信小程序圖片選擇區(qū)域屏裁剪實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12