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