一個JavaScript繼承的實現(xiàn)
更新時間:2006年10月24日 00:00:00 作者:
Author:尹偉銘
Blog:http://my.donews.com/yinwm/
如我前面的文章說的,對于JavaScript,一個類,就是一個function,他的類方法(也就是static的)都是作為這個function的一部分,而實例方法,都是在prototype上面的。
function ClassA() {
}
ClassA.staticMethod = function () {
}
ClassA.prototype.instanceMethod = function () {
}
在我這個實現(xiàn)當(dāng)中,一個類的繼承是拷貝父類的所有類方法,這樣子類就有了父類的靜態(tài)方法。
然后讓子類的prototype.prototype指向父類的prototype.
然后可以根據(jù)自己的需要,重寫一些方法。
function ClassB() {
}
ClassB.staticMethod = ClassA.staticMethod;
ClassB.prototype.prototype = ClassA.prototype;
ClassB.prototype.instanceMethod = function () {
// method 2
}
對于子類,使用一個prototype的鏈,來實現(xiàn)方法的實例方法的繼承。之所以選擇這種實現(xiàn)方法,是因為子類是要重寫其中的某些方法的。而prototype又是一個reference,所以直接的寫作ClassB.prototype = ClassA.prototype,會在重寫ClassB的實例方法的同時,破壞ClassA的實例方法。而修改后的方法則會屏蔽父類的。
尋找方法的順序是,instanceA.prototype.method -> ClassA.prototype.
此時對于類方法的繼承,已經(jīng)實現(xiàn),現(xiàn)在需要實現(xiàn)在子類中,調(diào)用父類的方法。
對于Java,這樣的使用是很平常的
public void method() {
super.method();
}
在JavsScript中,為了實現(xiàn)此類功能,所以必須保留一個parent的reference,指向ParentClass.prototype.
ClassB.prototype.parent = ClassA.prototype.
那么在instanceB里面調(diào)用this.parent.method.call(this);就可以使用父類的方法了。使用call調(diào)用,是為了把自己的數(shù)據(jù)傳到父類。更漂亮的解決方法,我還沒有想到。
所以完成的代碼是
function ClassA() {
}
ClassA.prototype.method1 = function () {
}
ClassA.staticMethod = function () {
}
function ClassB(){
}
ClassB.staticMethod = ClassA.staticMethod;
ClassB.prototype.prototype = ClassB.prototype.parent = ClassA.prototype;
這個我抽象出來一個extend方法,
var LCore = function () {
}
LCore.extend = function (destination, source) {
// copy all functons
for (var prop in source) {
if (prop == “prototype”) {
continue;
}
destination.prototype[prop] = source[prop];
}
// make a reference for parent and reference prototype
destination.prototype.prototype = destination.prototype.parent = source.prototype;
return destination;
}
Blog:http://my.donews.com/yinwm/
如我前面的文章說的,對于JavaScript,一個類,就是一個function,他的類方法(也就是static的)都是作為這個function的一部分,而實例方法,都是在prototype上面的。
function ClassA() {
}
ClassA.staticMethod = function () {
}
ClassA.prototype.instanceMethod = function () {
}
在我這個實現(xiàn)當(dāng)中,一個類的繼承是拷貝父類的所有類方法,這樣子類就有了父類的靜態(tài)方法。
然后讓子類的prototype.prototype指向父類的prototype.
然后可以根據(jù)自己的需要,重寫一些方法。
function ClassB() {
}
ClassB.staticMethod = ClassA.staticMethod;
ClassB.prototype.prototype = ClassA.prototype;
ClassB.prototype.instanceMethod = function () {
// method 2
}
對于子類,使用一個prototype的鏈,來實現(xiàn)方法的實例方法的繼承。之所以選擇這種實現(xiàn)方法,是因為子類是要重寫其中的某些方法的。而prototype又是一個reference,所以直接的寫作ClassB.prototype = ClassA.prototype,會在重寫ClassB的實例方法的同時,破壞ClassA的實例方法。而修改后的方法則會屏蔽父類的。
尋找方法的順序是,instanceA.prototype.method -> ClassA.prototype.
此時對于類方法的繼承,已經(jīng)實現(xiàn),現(xiàn)在需要實現(xiàn)在子類中,調(diào)用父類的方法。
對于Java,這樣的使用是很平常的
public void method() {
super.method();
}
在JavsScript中,為了實現(xiàn)此類功能,所以必須保留一個parent的reference,指向ParentClass.prototype.
ClassB.prototype.parent = ClassA.prototype.
那么在instanceB里面調(diào)用this.parent.method.call(this);就可以使用父類的方法了。使用call調(diào)用,是為了把自己的數(shù)據(jù)傳到父類。更漂亮的解決方法,我還沒有想到。
所以完成的代碼是
function ClassA() {
}
ClassA.prototype.method1 = function () {
}
ClassA.staticMethod = function () {
}
function ClassB(){
}
ClassB.staticMethod = ClassA.staticMethod;
ClassB.prototype.prototype = ClassB.prototype.parent = ClassA.prototype;
這個我抽象出來一個extend方法,
var LCore = function () {
}
LCore.extend = function (destination, source) {
// copy all functons
for (var prop in source) {
if (prop == “prototype”) {
continue;
}
destination.prototype[prop] = source[prop];
}
// make a reference for parent and reference prototype
destination.prototype.prototype = destination.prototype.parent = source.prototype;
return destination;
}
您可能感興趣的文章:
相關(guān)文章
layui 實現(xiàn)自動選擇radio單選框(checked)的方法
今天小編就為大家分享一篇layui 實現(xiàn)自動選擇radio單選框(checked)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript檢查某個function是否是原生代碼的方法
經(jīng)常碰到需要檢查某個function是否是原生代碼,要檢測這一點,最簡單的辦法當(dāng)然是判斷函數(shù)的 toString 方法返回的值2014-08-08Array數(shù)組對象中的forEach、map、filter及reduce詳析
這篇文章主要給大家介紹了關(guān)于Array數(shù)組對象中forEach、map、filter及reduce的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用array數(shù)據(jù)具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08js實現(xiàn)感應(yīng)鼠標(biāo)圖片透明度變化的方法
這篇文章主要介紹了js實現(xiàn)感應(yīng)鼠標(biāo)圖片透明度變化的方法,涉及javascript鼠標(biāo)操作及css修改技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02Jquery實現(xiàn)的tab效果可以指定默認(rèn)顯示第幾頁
tab效果想必大家在網(wǎng)上都有見過很多吧,在本文將為大家介紹下如何實現(xiàn)可以在代碼里面指定默認(rèn)顯示第幾頁的tab效果,感興趣的朋友不要錯過2013-10-10