码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript构造函数的继承

时间:2014-12-20 23:29:27      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:

我们已经在使用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构造函数的继承

标签:

原文地址:http://www.cnblogs.com/leejersey/p/4176027.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!