一个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 相关文章推荐
JS target与currentTarget区别说明
Aug 28 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
运算符&&的三个不同层次
Apr 07 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 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
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
深入php list()函数的详解
2013/06/05 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
jQuery动画与特效详解
2015/02/01 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
python机器学习之决策树分类详解
2017/12/20 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
阿里旅行:飞猪
2017/01/05 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
Solaris操作系统的线程机制
2015/07/28 面试题
网游商务专员求职信
2013/10/15 职场文书
给孩子的新年寄语
2014/04/08 职场文书
公司任命书模板
2014/06/06 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
关于召开会议的通知
2015/04/15 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
对Golang中的FORM相关字段理解
2021/05/02 Golang
常用的Python代码调试工具总结
2021/06/23 Python
python代码实现备忘录案例讲解
2021/07/26 Python
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers