一个JavaScript继承的实现

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;
}

赞 (0)

相关推荐

  • Javascript 继承机制的实现

    Javascript 继承机制的实现

    选定基类后,就可以创建它的子类了.是否使用基类完全由你决定.有时,你可能想创建一个不能直接使用的基类,它只是用于给子类提供通用的函数.在这种情况下,基类被看作抽象类. 尽管ECMAScript并没有像其他语言那样严格地定义抽象类,但有时它的确会创建一些不允许使用的类.通常,我们称这种类为抽象类. 创建的子类将继承超类的所有属性和方法,包括构造函数及方法的实现.记住,所有属性和方法都是公用的,因此子类可直接访问这些方法.子类还可添加超类中没有的新属性和方法,也可以覆盖超类中的属性和方法. 4.2.

  • 用JavaScript实现单继承和多继承的简单方法

    JavaScript就其本质是函数式编程语言,是Lisp的后代,同时又加入了一下面向对象编程的元素,放弃了一些难懂的函数式语言的元素. 函数式编程语言可以实现面向对象编程,这是毫无疑义的,Curry方法可以实现对类和对象的模拟.但是JavaScript提供了另一种实现OOP的方法:原型继承. 因此,JavaScript实现面向对象编程和一般的函数式编程语言还是有所区别的. 本文我将会给大家介绍JavaScript实现单继承和多继承的方法. 用原型实现单继承: 有很多JavaScript库提供了一

  • javascript 面向对象,实现namespace,class,继承，重载

    由于组里项目大多的javascript,css等客户端工作是另一同事在负责,该同事又特忙无法重构,老大也就只是提建议并未立即实施重构.但是我前些日子也改过些许客户端的小bug,确实那代码看得让人有些云里雾里,不知身在哪山,轻易不敢动代码,于是就自己动手鼓捣起我曾又爱又恨的javascript来,自己写一个简单的js实现namespace,继承,重载等面向对象的特性.欢迎拍砖灌水 .定义namespace Namesapce.js 复制代码 代码如下: Namespace = new Object

  • 实现JavaScript中继承的三种方式

    一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似,仅允许单父类继承.prototype继承的基本方式如下: 复制代码 代码如下: function Parent(){} function Child(){} Child.prototype = new Parent(); 通过对象Child的prototype属性指向父对象Parent的实例,使Child对象实例能通过原型链访问到父对象构造所定义的属性.方法等. 构造通过原型链链接了父级对象,是否就意味着完成了对象

  • ExtJS4中使用mixins实现多继承示例

    在ExtJS4中使用mixins来实现多继承.具体例子代码如下: 复制代码 代码如下: (function(){ Ext.onReady(function(){ Ext.define('say',{ canSay:function(){ alert("hello"); } }); Ext.define('eat',{ caneat:function(){ alert("eating"); } }); Ext.define("user",{ mix

  • js继承的实现代码

    base.js --继承的实现========================== [注]:继承后,如果父类是一个类,则会继承其属性,方法(包括用prototype声明的),静态方法,否则只有属性和方法. 复制代码 代码如下: Object.prototype.extendf= function (a,b){ if(!a||!b) return; var fa = typeof a=="function"; var fb = typeof b=="function"

  • 详解Javascript继承的实现

    本文从以下四个方面展开话题: •1. 混合方式实现及问题 •2. 期望的调用方式 •3. 继承库的详细实现 •4. 总结 感兴趣的朋友可以继续往下阅读详情. 我最早掌握的在js中实现继承的方法是在xx学到的混合原型链和对象冒充的方法,在工作中,只要用到继承的时候,我都是用这个方法实现.它的实现简单,思路清晰:用对象冒充继承父类构造函数的属性,用原型链继承父类prototype 对象的方法,满足我遇到过的所有继承的场景.正因如此,我从没想过下次写继承的时候,我要换一种方式来写,直到今天晚上看了三生

  • Javascript 继承实现例子

    Javascript 继承实现例子

    1. 创建基类 首先考虑Polygon类.哪些属性和方法是必需的?首先,一定要知道多边形的边数,所以应该加入整数属性sides.还有什么是多边形必需的?也许你想知道多边形的面积,那么加入计算面积的方法getArea().图4-3展示了该类的UML表示. 图 4-3 在UML中,属性由属性名和类型表示,位于紧接类名之下的单元中.方法位于属性之下,说明方法名和返回值的类型. 在ECMAScript中,可以如下编写类: 注意,Polygon类不够详细精确,还不能使用,方法getArea()返回0,因为

  • 深入理解JavaScript是如何实现继承的

    最近最网上看了一个人面试淘宝时的经历,然后发现了自己有好多好多不太清楚的地方,所以特此写点文章来加深自己对一些问题的理解. 文章中提到了一个问题是:JavaScript是如何实现继承的? 下面我便阐述一些在网上找到的方法和实例来解释下,借以加深自己的印象. 我们知道JavaScript中的function是万能的,除了用于的函数定义,也可以用于类的定义. JavaScript的继承,说起来也是有点怪,不像C++和一些面向对象的语言,他没有public,private等访问控制修饰,也没有impl

  • js对象的构造和继承实现代码

    复制代码 代码如下: <script> //定义js的user对象 function User(name,age){ this.name=name, this.age=age, this.getName=function(){ return this.name; }, this.getAge=function(){ return this.age; } } //实例化一个对象 var use=new User("aa",21); alert(use.name); alert

  • 利用javascript中的call实现继承

    昨天阿丹传了一个javascript中的重载例子给我,感觉不错.虽然到现在还是不太明白.怎么实现的.但还是贴出来. 实现setTimeout传object对象 看以下代码实现向里面的function 传参数 <script type="text/javascript"> var _st = window.setTimeout; window.setTimeout = function(fRef, mDelay) {  if(typeof fRef == 'function'

随机推荐