JavaScript构造函数的继承

我们已经在使用JavaScript的构造函数,来创建自己的自定义对象类型。但是,我们并没有看到如何创建一个继承层次结构。

重要的是,虽然构造函数通常被称为“类”,但他们真的是不一样的东西。在JavaScript中,一个构造函数就是在new一个对象时调用的函数。

这里有一个小复习:

function SuperHuman (name, superPower) {
    this.name = name;
    this.superPower = superPower;
}

SuperHuman.prototype.usePower = function () {
    console.log(this.superPower + "!");
};

var banshee = new SuperHuman("Silver Banshee", "sonic wail");

// 输出: "sonic wail!"
banshee.usePower();

SuperHuman的构造包含了初始化逻辑,而SuperHuman.prototype包含了所有SuperHuman的实例的共享方法。

但是假设我们要建立一个新的类型,继承自SuperHuman,同时增加自己的功能。那么,具体会怎么样?

function SuperHero (name, superPower) {
    this.name = name;
    this.superPower = superPower;
    this.allegiance = "Good";
}

SuperHero.prototype.saveTheDay = function () {
    console.log(this.name + " saved the day!");
};

var marvel = new SuperHero("Captain Marvel", "magic");

// 输出: "Captain Marvel saved the day!"
marvel.saveTheDay();

有几个问题。首先,SuperHero的构造函数被重复一些 SuperHuman 的构造函数的逻辑。并且更重要的是,在这一点上SuperHero的实例没有获得 SuperHuman 的方法。例如:

// TypeError: Object <#SuperHero> has no method ‘usePower‘
marvel.usePower();

让我们来解决这些问题。

function SuperHero (name, superPower) {
    // Reuse SuperHuman initialization
    SuperHuman.call(this, name, superPower);

    this.allegiance = "Good";
}

SuperHero.prototype = new SuperHuman();

SuperHero.prototype.saveTheDay = function () {
    console.log(this.name + " saved the day!");
};

var marvel = new SuperHero("Captain Marvel", "magic");

// Outputs: "Captain Marvel saved the day!"
marvel.saveTheDay();

// Outputs: "magic!"
marvel.usePower();

我们已经成功通过调用SuperHuman与SuperHero的这个对象,并传递所需的参数,以消除重复的构造逻辑。这确保了SuperHuman的初始化逻辑将担任新的SuperHero对象。然后,我们套上了额外的逻辑是特定SuperHuman。

但是,为了确保SuperHero.prototype继承SuperHuman.prototype的方法,我们实际上new SuperHuma() 了一个实例。

这个基本的遗传模式并不总是可行的,特别是如果父类的构造是复杂的,但它会处理简单的情况相当不错。

在未来的问题,我们将看看在做传承更复杂的方式。

时间: 2025-01-22 01:02:09

JavaScript构造函数的继承的相关文章

Javascript面向对象编程(二):构造函数的继承

这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.color = col

JavaScript构造函数+原型创建对象,原型链+借用构造函数模式继承父类练习

虽然经常说是做前端开发的,但常常使用的技术反而是JQuery比较多一点.在JavaScript的使用上相对而言少些.尤其是在创建对象使用原型链继承上面,在项目开发中很少用到.所以今天做个demo练习一下,以后忘记了也可以照搬一下. 说明一下: 1. Demo中使用的是构造函数+原型模式创建的对象.构造函数中存储对象实例使用的属性,原型模式增加实例使用的方法. 2. Demo中的继承分为两个方面.一个是属性继承,使用的是借用构造函数模式 call()方法.另一个是方法继承,这个就是使用原型方式继承

Javascript面向对象编程(二):构造函数的继承 作者:yuan一峰

Javascript面向对象编程(二):构造函数的继承 作者: 阮一峰 日期: 2010年5月23日 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function

Javascript面向对象三:非构造函数的继承

一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做"医生". var Doctor ={ career:'医生' } 请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象? 这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现&q

Javascript面向对象编程(三):非构造函数的继承

作者: 阮一峰 日期: 2010年5月24日 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做"医生". var Doctor ={ career:'医生

JavaScript学习总结(二十)——Javascript非构造函数的继承

一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". 1 var Chinese = { 2 nation:'中国' 3 }; 还有一个对象,叫做"医生". 1 var Doctor ={ 2 career:'医生' 3 } 请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象? 这里要注意,这两个对象都是普通对象,不是构造函数,无法

javascript 构造函数继承

构造函数的继承 第一部分介绍了如何"封装"数据和方法,以及如何从原型对象生成实例.现在介绍的是,对象之间的"继承"的五种方法.比如,现在有一个"动物"对象的构造函数.  function Animal(){    this.species = "动物";  }还有一个"猫"对象的构造函数.  function Cat(name,color){    this.name = name;    this.col

Javascript面向对象编程(四):非构造函数的继承

什么叫非构造函数的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做"医生". var Doctor ={ career:'医生' } 请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象? 这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承".

【转】Javascript面向对象编程(三):非构造函数的继承

原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html 作者: 阮一峰 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人"