js中为什么不能用这样js继承方式

2014年4月 PHP大版内专家分月排行榜第二2014年3月 PHP大版内专家分月排行榜第二2014年3月 Web 开发大版内专家分月排行榜第二2014年2月 PHP大版内专家分月排行榜第二
2014年4月 Web 开发大版内专家分月排行榜第三
2014年4月 PHP大版内专家分月排行榜第二2014年3月 PHP大版内专家分月排行榜第二2014年3月 Web 开发大版内专家分月排行榜第二2014年2月 PHP大版内专家分月排行榜第二
2014年4月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了,不再提供回复功能。js中的几种继承实现 - 推酷
js中的几种继承实现
使用Object.create实现类式继承
下面是官网的一个例子
//Shape - superclass
function Shape() {
this.x = 0;
this.y = 0;
Shape.prototype.move = function(x, y) {
(&Shape moved.&);
// Rectangle - subclass
function Rectangle() {
Shape.call(this); //call super constructor.
Rectangle.prototype = Object.create(Shape.prototype);
var rect = new Rectangle();
rect instanceof Rectangle //true.
rect instanceof Shape //true.
rect.move(1, 1); //Outputs, &Shape moved.&
此时Rectangle原型的constructor指向父类,如需要使用自身的构造,手动指定即可,如下
Rectangle.prototype.constructor = R
工具包自带的
util.inherites
util.inherits(constructor, superConstructor)
const util = require('util');
const EventEmitter = require('events');
function MyStream() {
EventEmitter.call(this);
util.inherits(MyStream, EventEmitter);
MyStream.prototype.write = function(data) {
this.emit('data', data);
var stream = new MyStream();
console.log(stream instanceof EventEmitter); // true
console.log(MyStream.super_ === EventEmitter); // true
stream.on('data', (data) =& {
console.log(`Received data: &${data}&`);
stream.write('It works!'); // Received data: &It works!&
也很简单的例子,其实源码用了
的新特性,我们瞅一瞅
exports.inherits = function(ctor, superCtor) {
if (ctor === undefined || ctor === null)
throw new TypeError('The constructor to &inherits& must not be ' +
'null or undefined');
if (superCtor === undefined || superCtor === null)
throw new TypeError('The super constructor to &inherits& must not ' +
'be null or undefined');
if (superCtor.prototype === undefined)
throw new TypeError('The super constructor to &inherits& must ' +
'have a prototype');
ctor.super_ = superC
Object.setPrototypeOf(ctor.prototype, superCtor.prototype);
Object.setPrototypeOf
即为ES6新特性,将一个指定的对象的原型设置为另一个对象或者null
Object.setPrototypeOf(obj, prototype)
为将要被设置原型的一个对象
新的原型(可以是一个对象或者null).
如果设置成
,即为如下示例
Object.setPrototypeOf({}, null);
setPrototypeOf
真是人如其名啊,专门搞
那么这个玩意又是如何实现的呢?此时需要借助宗师
Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
obj.__proto__ =
obj.__proto__
的同学应该非常熟悉这个关键字,java中的继承都是靠它实现的。
ES6新加入的class关键字是语法糖,本质还是函数.
在下面的例子,定义了一个名为Polygon的类,然后定义了一个继承于Polygon的类 Square。注意到在构造器使用的 super(),supper()只能在构造器中使用,super函数一定要在this可以使用之前调用。
class Polygon {
constructor(height, width) {
this.name = 'Polygon';
this.height =
this.width =
class Square extends Polygon {
constructor(length) {
super(length, length);
this.name = 'Square';
使用关键字后就不用婆婆妈妈各种设置原型了,关键字已经封装好了,很快捷方便。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置: 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致JavaScript中的类继承
JavaScript中的类继承
And you think you're so clever and classless and free--John Lennon
一种没有类的,面向对象的语言,它使用原型继承来代替类继承。这个可能对受过传统的面向对象语言(如C++和Java)训练的程序员来说有点迷惑。JavaScript的原型继承比类继承有更强大的表现力,现在就让我们来看看。
JavaScript
但首先,为什么我们如此关心继承呢?主要有两个原因。第一个是类型有利。我们希望语言系统可以自动进行类似类型引用的转换cast。小类型安全可以从一个要求程序显示地转换对象引用的类型系统中获得。这是强类型语言最关键的要点,但是这对像JavaScript这样的弱类型语言是无关的,JavaScript中的类引用无须强制转换。
第二个原因是为了代码的复用。在程序中常常会发现很多对象都会实现同一些方法。类让建立单一的一个定义集中建立对象成为可能。在对象中包含其他对象也包含的对象也是很常见的,但是区别仅仅是一小部分方法的添加或者修改。类继承对这个十分有用,但原型继承甚至更有用。
要展示这一点,我们要介绍一个小小的“甜点”可以主我们像一个常规的类语言一样写代码。我们然后会展示一些在类语言中没有的有用的模式。最后,我们会就会解释这些“甜点”。
首先,我们建立一个Parenizor类,它有成员 value的get和set方法,还有一个会将value包装在括号内的toString方法。
function Parenizor(value) {
this.setValue(value);
Parenizor.method('setValue', function (value) {
this.value =
return this;
Parenizor.method('getValue', function () {
return this.value;
Parenizor.method('toString', function () {
return '(' + this.getValue() + ')';
这个语法可能没什么用,但它很容易看出其中类的形式。method方法接受一个方法名和一个函数,并把它们放入类中作为公共方法。
现在我们可以写成
myParenizor = new Parenizor(0);
myString = myParenizor.toString();正如期望的那样,myString是 "(0)"。
现在我们要建立另一个继承自Parenizor的类,它基本上是一样的除了toString方法将会产生"-0-"如果value是零或者空。
function ZParenizor(value) {
this.setValue(value);
ZParenizor.inherits(Parenizor);
ZParenizor.method(&toString&, function () {
if (this.getValue()) {
return this.uber('toString');
return "-0-";
inherits方法类似于Java的extends 。uber方法类似于Java的super。它令一个方法调用父类的方法(更改了名称是为了避免和保留字冲突)。
我们可以写成这样
myZParenizor = new ZParenizor(0);
myString = myZParenizor.toString();
这次, myString是 "-0-".
JavaScript 并没有类,但我们可以编程达到这个目的。
通过操作一个函数的prototype对象,我们可以实现多继承。混合多继承难以实现而且可能会遭到名称冲突的危险。我们可以在JavaScript中实现混合多继承,但这个例子我们将使用一个较规范的形式称为瑞士继承.
假设有一个NumberValue类有一个setValue方法用来检查 value是不是在一个指定范围内的一个数,并在适当的时候抛出异常。我们只要它的setValue和 setRange方法给我们的ZParenizor。我们当然不想要它的toString方法。这样,我们写到:
ZParenizor.swiss(NumberValue, 'setValue', 'setRange');这个将仅仅添加需要的方法。
寄生继承这是另一个书写 ZParenizor类的方法。并不从 Parenizor继承,而是写了一个调用了Parenizor构造器的构造器,并对结果修改最后返回这个结果。这个构造器添加的是特权方法而非公共方法。
function ZParenizor2(value) {
var self = new Parenizor(value);
self.toString = function () {
if (this.getValue()) {
return this.uber('toString');
return "-0-"
类继承是一种“是……”的关系,而寄生继承是一个关于“原是……而现在是……”的关系。构造器在对象的构造中扮演了大量的角色。注意uber (代替super关键字)对特权方法仍有效。
JavaScript的动态性让我们可以对一个已有的类添加或替换方法。我们可以在任何时候调用方法。我们可以随时地扩展一个类。继承不是这个方式。所以我们把这种情况称为“类扩展”来避免和Java的extends──也叫扩展,但不是一回事──相混淆。
在静态面向对象语言中,如果你想要一个对象和另一个对象有所区别,你必须新建立一个类。但在JavaScript中,你可以向单独的对象添加方法而不用新建类。这会有巨大的能量因为你就可以书写尽量少的类,类也可以写得更简单。想想JavaScript的对象就像哈希表一样。你可以在任何时候添加新的值。如果这个值是一个函数,那他就会成为一个方法。
这样在上面的例子中,我完全不需要 ZParenizor类。我只要简单修改一下我的实例就行了。
myParenizor = new Parenizor(0);
myParenizor.toString = function () {
if (this.getValue()) {
return this.uber('toString');
return "-0-";
myString = myParenizor.toString();
我们给 myParenizor实例添加了一个 toString方法而没有使用任何继承。我们可以演化单独的实例因为这个语言是无类型的。
要让上面的例子运行起来,我写了四个“甜点”方法。首先,method方法,可以把一个实例方法添加到一个类中。
Function.prototype.method = function (name, func) {
this.prototype[name] =
return this;
这个将会添加一个公共方法到 Function.prototype中,这样通过类扩展所有的函数都可以用它了。它要一个名称和一个函数作为参数。
它返回 this。当我写一个没有返回值的方法时,我通常都会让它返回this。这样可以形成链式语句。
下面是 inherits方法,它会指出一个类是继承自另一个类的。它必须在两个类都定义完了之后才能定义,但要在方法继承之前调用。
Function.method('inherits', function (parent) {
var d = 0, p = (this.prototype = new parent());
this.method('uber', function uber(name) {
var f, r, t = d, v = parent.prototype;
while (t) {
v = v.constructor.prototype;
f = v[name];
f = p[name];
if (f == this[name]) {
f = v[name];
r = f.apply(this, Array.prototype.slice.apply(arguments, [1]));
return this;
});再来,我们扩展 Function类。我们加入一个 parent类的实例并将它做为新的prototype。我们也必须修正constructor字段,同时我们加入uber方法。
uber方法将会在自己的prototype中查找某个方法。这个是寄生继承或类扩展的一种情况。如果我们是类继承,那么我们要找到parent的prototype中的函数。return语句调用了函数的apply方法来调用该函数,同时显示地设置this并传递参数。参数(如果有的话)可以从arguments数组中获得。不幸的是,arguments数组并不是一个真正的数组,所以我们又要用到apply来调用数组中的slice方法。
最后,swiss方法
Function.method('swiss', function (parent) {
for (var i = 1; i & arguments.length; i += 1) {
var name = arguments[i];
this.prototype[name] = parent.prototype[name];
return this;
The swiss方法对每个参数进行循环。每个名称,它都将parent的原型中的成员复制下来到新的类的prototype中。
JavaScript可以像类语言那样使用,但它也有一种十分独特的表现层次。我们已经看过了类继承、瑞士继承、寄生继承、类扩展和对象扩展。这一等系列代码复用的模式都能来自这个一直被认为是很小、很简单的JavaScript语言。
类对象属于“硬的”。给一个“硬的”对象添加成员的唯一的方法是建立一个新的类。在JavaScript中,对象是“软的”。要给一个“软”对象添加成员只要简单的赋值就行了。
因为JavaScript中的类是这样地灵活,你可能会还想到更复杂的类继承。但深度继承并不合适。浅继承则较有效而且更易表达。}

我要回帖

更多关于 js的继承 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信