再论Javascript的类继承_javascript技巧

无参数类继承的问题

先看一段示例代码,实现B继承于A:

复制代码 代码如下:

function A() {
}
A.prototype.a1 = function() {
};

function B() {
}
B.prototype = new A();
B.prototype.b1 = function() {
};

var b = new B();
alert(b.constructor == A); // true
alert(b.constructor == B); // false

这段代码的主要问题是:

* 需要实例化A作为B的原型,此时就执行了A的构造函数。但按照面向对象的规则,实例化B之前,B及其父类A的构造函数都不应该执行。
* 更改了B的prototype,导致b.constructor不是B而是A。

有参类继承的问题

假设A和B都有两个字符串参数s1和s2,A中计算了两段字符串的总长度,B直接以s1、s2为参数调用A:

复制代码 代码如下:

function A(s1, s2) {
  this.totalLength = s1.length + s2.length;
}
A.prototype.a1 = function() {  
};

function B(s1, s2) {
}
B.prototype = new A();
B.prototype.b1 = function() {
};

new B("ab", "123");

可以看到,这段代码中根本没有办法把s1和s2传到A,而又因为实例化A作为B的原型时没有参数,所以出现了异常:

复制代码 代码如下:

s1 is undefined

解决方案

s1和s2的作用域只在B内,要把它们传到A,就只能在B中操作,借助函数的apply方法就可以实现之:

复制代码 代码如下:

function B(s1, s2) {
  A.apply(this, arguments);
  alert(this.totalLength);
}

接下来的问题就是如何把A的方法添加到B的原型中去。这也不难,只要遍历A.prototype,把方法复制到B.prototype即可。要注意的是,对于同名的方法,自然是子类优先(重载),因而不能覆盖:

复制代码 代码如下:

for (var m in A.prototype) {
  if (!B.prototype[m]) { // 父类不能覆盖子类的方法
    B.prototype[m] = A.prototype[m];
  }
}

后记

考虑到C#、Java等高级语言都抛弃了多继承,因此,本文所讨论的也只是单继承的情况。而本文所述的继承方法,也会写成jRaiser的一个扩展,迟些发布。

时间: 2024-09-12 22:55:05

再论Javascript的类继承_javascript技巧的相关文章

JavaScript中的类继承_javascript技巧

JavaScript Inheritance DouglasCrockfordwww.crockford.com And you think you're so clever and classless and free--John Lennon JavaScript一种没有类的,面向对象的语言,它使用原型继承来代替类继承.这个可能对受过传统的面向对象语言(如C++和Java)训练的程序员来说有点迷惑.JavaScript的原型继承比类继承有更强大的表现力,现在就让我们来看看. Java Jav

浅谈javascript的原型继承_javascript技巧

请看源码: 复制代码 代码如下: function clone(o) { var F = function(){}; F.prototype = o; return new F(); } 首先看ext(4.1的1896行开始)的原型式继承. 复制代码 代码如下: var TemplateClass = function(){}; var ExtObject = Ext.Object = { chain: function (object) { TemplateClass.prototype =

javascript StringBuilder类实现_javascript技巧

复制代码 代码如下: // Initializes a new instance of the StringBuilder class // and appends the given value if supplied function StringBuilder(value) { this.strings = new Array(""); this.append(value); } // Appends the given value to the end of this inst

再谈javascript原型继承_javascript技巧

真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承. 原型与原型链 说原型继承之前还是要先说说原型和原型链,毕竟这是实现原型继承的基础. 在Javascript中,每个函数都有一个原型属性prototype指向自身的原型,而由这个函数创建的对象也有一个__proto__属性指向这个原型,而函数的原型是一个对象,所以这个对象也会有一个__proto__指向自己的原型,这样逐层深入直到Object对象的

JavaScript设计模式学习之“类式继承”_javascript技巧

在做一件事情之前,首先要清楚做这件事情的好处有什么,相信不会有哪个人愿意无缘无故的去做事情.一般说来,我们在设计类的时候,实际上就是希望能减少重复性的代码,使用继承可以完美的做到这一点,借助继承机制,你可以在现有类的基础上再次进行设计并且充分利用它们已经具备的各种方法,而对设计的修改也更为轻松.废话不多说了,举例说明: 复制代码 代码如下: function Person(name){     this.name = name; } Person.prototype.getname = func

理解javascript对象继承_javascript技巧

先从一个问题进行研究深入,什么是javascript对象继承? 比如我们有一个"动物"对象的构造函数. function animal() { this.type = '动物'; } 还有一个"猫"对象的构造函数. function cat(name,color) { this.name = name; this.color = color; } 我们知道猫也属于动物,如果这个猫对象想要继承动物对象的属性,我们该怎么做呢? 构造函数绑定 使用构造函数绑定是最简单的方

javascript每日必学之继承_javascript技巧

朋友们大家好,我们今天这一讲就接着前面的封装继续讲解,今天就是在前面内容上面的升级,OOP思想中的继承,我们就先来解释一下继承到底是什么意思,我们在什么地方会用到继续. 继承就是,后代继续祖先的一系列属性,行为.后代仍然算是与祖先同族,下面我们再用一些具体描述,来理解一下什么是继承 中国人,跟美国人都是 继承自 人类祖先,所以我们具有相同的属性行为,但是还有一定的差异,后面我们们将继续讲到的多态,所以通过上面的示例图,我们可以清晰的知道,人与人之前其实大同小异,所以我们再看看下面的示例代码,我们

浅谈javascript原型链与继承_javascript技巧

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解.       首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的

JavaScript 对象、函数和继承_javascript技巧

1. Javascript中的对象 JavaScript可以说是一个基于对象的编程语言,为什么说是基于对象而不是面向对象,因为JavaScript自身只实现了封装,而没有实现继承和多态.既然他是基于对象的,那么我们就来说说js中的对象.有人说js中所有的都是对象,这句话不完全正确.正确的一方是他强调了对象在js中的重要性,对象在js中无处不在,包括可以构造对象的函数本身也是对象.但是另一方面,js中也有一些简单的数据类型,包括数字.字符串和布尔值.null值和undefined值,而这些不是对象