一个JavaScript继承的实现


Posted in Javascript onOctober 24, 2006

Author:尹伟铭

Blog:http://my.donews.com/yinwm/

如我前面的文章说的,对于JavaScript,一个类,就是一个function,他的类方法(也就是static的)都是作为这个function的一部分,而实例方法,都是在prototype上面的。
function ClassA() {
}

ClassA.staticMethod = function () {
}

ClassA.prototype.instanceMethod = function () {
}

在我这个实现当中,一个类的继承是拷贝父类的所有类方法,这样子类就有了父类的静态方法。
然后让子类的prototype.prototype指向父类的prototype.
然后可以根据自己的需要,重写一些方法。
function ClassB() {
}
ClassB.staticMethod = ClassA.staticMethod;
ClassB.prototype.prototype = ClassA.prototype;
ClassB.prototype.instanceMethod = function () {
// method 2
}

对于子类,使用一个prototype的链,来实现方法的实例方法的继承。之所以选择这种实现方法,是因为子类是要重写其中的某些方法的。而prototype又是一个reference,所以直接的写作ClassB.prototype = ClassA.prototype,会在重写ClassB的实例方法的同时,破坏ClassA的实例方法。而修改后的方法则会屏蔽父类的。

寻找方法的顺序是,instanceA.prototype.method -> ClassA.prototype.
此时对于类方法的继承,已经实现,现在需要实现在子类中,调用父类的方法。
对于Java,这样的使用是很平常的
public void method() {
super.method();
}
在JavsScript中,为了实现此类功能,所以必须保留一个parent的reference,指向ParentClass.prototype.
ClassB.prototype.parent = ClassA.prototype.
那么在instanceB里面调用this.parent.method.call(this);就可以使用父类的方法了。使用call调用,是为了把自己的数据传到父类。更漂亮的解决方法,我还没有想到。

所以完成的代码是
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;

Javascript 相关文章推荐
jquery 日期分离成年月日的代码
May 14 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
动态加载js的几种方法
Oct 23 #Javascript
用js怎么把&字符换成"&amp:"
Oct 19 #Javascript
对联广告js flash激活
Oct 19 #Javascript
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 #Javascript
菜单效果
Oct 14 #Javascript
Using the TextRange Object
Oct 14 #Javascript
使用TextRange获取输入框中光标的位
Oct 14 #Javascript
You might like
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
php生成略缩图代码
2012/07/16 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
vue小白入门教程
2018/04/02 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
党校培训思想汇报
2013/12/30 职场文书
满月酒答谢词
2014/01/14 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
工程负责人任命书
2014/06/06 职场文书
专家推荐信范文
2015/03/26 职场文书
简爱电影观后感
2015/06/10 职场文书
教师节随笔
2015/08/15 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
教你使用pyinstaller打包Python教程
2021/05/27 Python