javascript類(lèi)繼承的實(shí)現(xiàn)方法
首先需要知道兩個(gè)概念:
- 構(gòu)造函數(shù)的
prototype
屬性是實(shí)例的原型,這個(gè)屬性的值是一個(gè)對(duì)象,可以被重新賦值,比如有時(shí)候?yàn)榱撕?jiǎn)便會(huì)把prototype
屬性重新賦值為一個(gè)對(duì)象字面量; - 每個(gè)對(duì)象都有一個(gè)
__proto__
內(nèi)部屬性,指向自己的原型,雖然是非標(biāo)準(zhǔn)的,但是各大瀏覽器都實(shí)現(xiàn)了他,在mdn文檔中提到的[[Prototype]]
就是__proto__
。比如實(shí)例的__proto__
屬性就是指向了構(gòu)造函數(shù)的prototype
;
下面的代碼來(lái)自@better-scroll/core實(shí)現(xiàn)了類(lèi)的繼承。
// extendStatics函數(shù)的作用是實(shí)現(xiàn)類(lèi)靜態(tài)方法的繼承,構(gòu)造函數(shù)原型繼承,最終結(jié)果是d可以訪問(wèn)b的屬性和方法。 var extendStatics = function (d, b) { // Object.setPrototypeOf() 方法設(shè)置一個(gè)指定的對(duì)象的原型(即,內(nèi)部 [[Prototype]] 屬性)到另一個(gè)對(duì)象或 null。是Object.prototype.__proto__ 的替代 extendStatics = Object.setPrototypeOf || ( // 這里的邏輯是:如果當(dāng)前環(huán)境支持 __proto__關(guān)鍵字, 就用__proto__修改原型的指向 { __proto__: [] } // instanceof 運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。 instanceof Array && function (d, b) { d.__proto__ = b; // 把d的原型指向b } ) || /* 如果以上兩者修改原型指向的方法都不支持那么手動(dòng)將b上的屬性添加到d上 */ function (d, b) { for (var p in b) { // 如果p是對(duì)象b自身的屬性,那么將屬性p添加到對(duì)象d上 if (Object.prototype.hasOwnProperty.call(b, p)) { d[p] = b[p]; } } }; return extendStatics(d, b); }; function __extends(d, b) { extendStatics(d, b); // 這里 __ 函數(shù)的作用是: 1. 保證d的構(gòu)造函數(shù)指向正確;2.通過(guò) __ 的實(shí)例實(shí)現(xiàn)繼承; function __() { this.constructor = d; } __.prototype = b.prototype; //Object.create() 方法創(chuàng)建一個(gè)新對(duì)象,使用現(xiàn)有的對(duì)象來(lái)提供新創(chuàng)建的對(duì)象的 __proto__ // 如果b不是null, d.prototype = new __(); d.prototype.__proto__ = b.prototype; d.prototype = b === null ? Object.create(b) : new __(); }
對(duì)于__extends
函數(shù)中的如下代碼:
function __() { this.constructor = d; } __.prototype = b.prototype; d.prototype = new __();
其實(shí)這段邏輯用Object.create()
也能實(shí)現(xiàn),用Object.create()
實(shí)現(xiàn)后的__extends
如下:
function __extends(d, b) { extendStatics(d, b); d.prototype = Object.create(b.prototype); d.prototype.constructor = d; }
到此這篇關(guān)于javascript類(lèi)的繼承的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)js類(lèi)繼承內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
小程序?qū)崿F(xiàn)展開(kāi)/收起的效果示例
這篇文章主要介紹了小程序?qū)崿F(xiàn)展開(kāi)/收起的效果示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09談?wù)勎覍?duì)JavaScript中typeof和instanceof的深入理解
這次主要說(shuō)說(shuō)javascript的類(lèi)型判斷函數(shù)typeof和判斷構(gòu)造函數(shù)原型instanceof的用法和注意的地方,對(duì)本文感興趣的朋友一起看看吧2015-12-12JavaScript實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片變換效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片變換效果的方法,涉及javascript控制鼠標(biāo)事件及樣式變換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04JavaScript Drum Kit 指南(純 JS 模擬敲鼓效果)
這篇文章主要介紹了JavaScript Drum Kit 指南,也就是純 JS 模擬敲鼓效果實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-07-07前端使用JS內(nèi)置Blob實(shí)現(xiàn)下載各種形式的文件實(shí)例
通過(guò)使用JavaScript我們可以很方便地實(shí)現(xiàn)文件的下載功能,這篇文章主要給大家介紹了關(guān)于前端使用JS內(nèi)置Blob實(shí)現(xiàn)下載各種形式文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06canvas實(shí)現(xiàn)十二星座星空?qǐng)D
本文主要分享了canvas實(shí)現(xiàn)十二星座星空?qǐng)D的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02微信小程序?qū)崿F(xiàn)幸運(yùn)大轉(zhuǎn)盤(pán)功能的示例代碼
這篇文章主要介紹了如何在微信小程序中實(shí)現(xiàn)幸運(yùn)大轉(zhuǎn)盤(pán)功能,參與用戶(hù)點(diǎn)擊抽獎(jiǎng)便可抽取輪盤(pán)的獎(jiǎng)品,感興趣的小伙伴可以跟隨小編一起動(dòng)手試一試2022-03-03分享JS表單驗(yàn)證源碼(帶錯(cuò)誤提示及密碼等級(jí))
這篇文章主要介紹了JS表單驗(yàn)證源碼(帶錯(cuò)誤提示及密碼等級(jí)),代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01使用BootStrap實(shí)現(xiàn)表格隔行變色及hover變色并在需要時(shí)出現(xiàn)滾動(dòng)條
這篇文章主要介紹了使用BootStrap實(shí)現(xiàn)表格隔行變色及hover變色并在需要時(shí)出現(xiàn)滾動(dòng)條效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01