一個(gè)JavaScript繼承的實(shí)現(xiàn)
更新時(shí)間:2006年10月24日 00:00:00 作者:
Author:尹偉銘
Blog:http://my.donews.com/yinwm/
如我前面的文章說的,對于JavaScript,一個(gè)類,就是一個(gè)function,他的類方法(也就是static的)都是作為這個(gè)function的一部分,而實(shí)例方法,都是在prototype上面的。
function ClassA() {
}
ClassA.staticMethod = function () {
}
ClassA.prototype.instanceMethod = function () {
}
在我這個(gè)實(shí)現(xiàn)當(dāng)中,一個(gè)類的繼承是拷貝父類的所有類方法,這樣子類就有了父類的靜態(tài)方法。
然后讓子類的prototype.prototype指向父類的prototype.
然后可以根據(jù)自己的需要,重寫一些方法。
function ClassB() {
}
ClassB.staticMethod = ClassA.staticMethod;
ClassB.prototype.prototype = ClassA.prototype;
ClassB.prototype.instanceMethod = function () {
// method 2
}
對于子類,使用一個(gè)prototype的鏈,來實(shí)現(xiàn)方法的實(shí)例方法的繼承。之所以選擇這種實(shí)現(xiàn)方法,是因?yàn)樽宇愂且貙懫渲械哪承┓椒ǖ?。而prototype又是一個(gè)reference,所以直接的寫作ClassB.prototype = ClassA.prototype,會(huì)在重寫ClassB的實(shí)例方法的同時(shí),破壞ClassA的實(shí)例方法。而修改后的方法則會(huì)屏蔽父類的。
尋找方法的順序是,instanceA.prototype.method -> ClassA.prototype.
此時(shí)對于類方法的繼承,已經(jīng)實(shí)現(xiàn),現(xiàn)在需要實(shí)現(xiàn)在子類中,調(diào)用父類的方法。
對于Java,這樣的使用是很平常的
public void method() {
super.method();
}
在JavsScript中,為了實(shí)現(xiàn)此類功能,所以必須保留一個(gè)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;
這個(gè)我抽象出來一個(gè)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,一個(gè)類,就是一個(gè)function,他的類方法(也就是static的)都是作為這個(gè)function的一部分,而實(shí)例方法,都是在prototype上面的。
function ClassA() {
}
ClassA.staticMethod = function () {
}
ClassA.prototype.instanceMethod = function () {
}
在我這個(gè)實(shí)現(xiàn)當(dāng)中,一個(gè)類的繼承是拷貝父類的所有類方法,這樣子類就有了父類的靜態(tài)方法。
然后讓子類的prototype.prototype指向父類的prototype.
然后可以根據(jù)自己的需要,重寫一些方法。
function ClassB() {
}
ClassB.staticMethod = ClassA.staticMethod;
ClassB.prototype.prototype = ClassA.prototype;
ClassB.prototype.instanceMethod = function () {
// method 2
}
對于子類,使用一個(gè)prototype的鏈,來實(shí)現(xiàn)方法的實(shí)例方法的繼承。之所以選擇這種實(shí)現(xiàn)方法,是因?yàn)樽宇愂且貙懫渲械哪承┓椒ǖ?。而prototype又是一個(gè)reference,所以直接的寫作ClassB.prototype = ClassA.prototype,會(huì)在重寫ClassB的實(shí)例方法的同時(shí),破壞ClassA的實(shí)例方法。而修改后的方法則會(huì)屏蔽父類的。
尋找方法的順序是,instanceA.prototype.method -> ClassA.prototype.
此時(shí)對于類方法的繼承,已經(jīng)實(shí)現(xiàn),現(xiàn)在需要實(shí)現(xiàn)在子類中,調(diào)用父類的方法。
對于Java,這樣的使用是很平常的
public void method() {
super.method();
}
在JavsScript中,為了實(shí)現(xiàn)此類功能,所以必須保留一個(gè)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;
這個(gè)我抽象出來一個(gè)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;
}
您可能感興趣的文章:
- 利用javascript中的call實(shí)現(xiàn)繼承
- 用JavaScript實(shí)現(xiàn)單繼承和多繼承的簡單方法
- Javascript 繼承實(shí)現(xiàn)例子
- Javascript 繼承機(jī)制的實(shí)現(xiàn)
- 實(shí)現(xiàn)JavaScript中繼承的三種方式
- javascript 面向?qū)ο?實(shí)現(xiàn)namespace,class,繼承,重載
- js繼承的實(shí)現(xiàn)代碼
- js對象的構(gòu)造和繼承實(shí)現(xiàn)代碼
- ExtJS4中使用mixins實(shí)現(xiàn)多繼承示例
- 深入理解JavaScript是如何實(shí)現(xiàn)繼承的
- 詳解Javascript繼承的實(shí)現(xiàn)
相關(guān)文章
讓div層隨鼠標(biāo)移動(dòng)的實(shí)現(xiàn)代碼 ie ff
隨鼠標(biāo)移動(dòng)的div層使用ie ff ,大家可以注意下兼容性的問題。2009-12-12
微信小程序?qū)崿F(xiàn)實(shí)時(shí)圓形進(jìn)度條的方法示例
這篇文章主要給大家介紹了利用微信小程序?qū)崿F(xiàn)實(shí)時(shí)圓形進(jìn)度條的方法,文中給出了詳細(xì)的示例代碼,相信對大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-02-02
JavaScript中boolean類型之三種情景實(shí)例代碼
下面小編就為大家?guī)硪黄狫avaScript中boolean類型之三種情景實(shí)例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
JS返回只包含數(shù)字類型的數(shù)組實(shí)例分析
這篇文章主要介紹了JS返回只包含數(shù)字類型的數(shù)組實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了循環(huán)遍歷數(shù)組及正則匹配兩種實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12

