首页 > 代码库 > JavaScript构造函数的继承
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() 了一个实例。
这个基本的遗传模式并不总是可行的,特别是如果父类的构造是复杂的,但它会处理简单的情况相当不错。
在未来的问题,我们将看看在做传承更复杂的方式。
JavaScript构造函数的继承
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。