javascript類繼承的實現(xiàn)方法
首先需要知道兩個概念:
- 構(gòu)造函數(shù)的
prototype屬性是實例的原型,這個屬性的值是一個對象,可以被重新賦值,比如有時候為了簡便會把prototype屬性重新賦值為一個對象字面量; - 每個對象都有一個
__proto__內(nèi)部屬性,指向自己的原型,雖然是非標(biāo)準(zhǔn)的,但是各大瀏覽器都實現(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)文章
Javasript設(shè)計模式之鏈?zhǔn)秸{(diào)用詳解
這篇文章主要為大家詳細(xì)介紹了Javasript設(shè)計模式之鏈?zhǔn)秸{(diào)用的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-04-04
javascript實現(xiàn)點擊商品列表checkbox實時統(tǒng)計金額的方法
這篇文章主要介紹了javascript實現(xiàn)點擊商品列表checkbox實時統(tǒng)計金額的方法,涉及javascript鼠標(biāo)事件及頁面元素操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
JSP中使用JavaScript動態(tài)插入刪除輸入框?qū)崿F(xiàn)代碼
這篇文章主要介紹了JSP中如何使用JavaScript動態(tài)插入刪除輸入框,需要的朋友可以參考下2014-06-06

