一个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 相关文章推荐
JavaScript Array扩展实现代码
Oct 14 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
Node.js的包详细介绍
Jan 14 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
Node.js readline模块与util模块的使用
Mar 01 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
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
vue集成chart.js的实现方法
2019/08/20 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
python批量处理文件或文件夹
2020/07/28 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
物业电工岗位职责
2013/11/20 职场文书
工程建设实施方案
2014/03/14 职场文书
公司保密承诺书
2014/03/27 职场文书
机动车登记业务委托书
2014/10/08 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
论文评审意见
2015/06/05 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python