【Infragistics教程】在javascript构造函数中创建基本继承

【下载Infragistics Ultimate最新版本】

用javascript创建对象有四种方法。具体如下：

1. 对象作为文本
2. 构造函数调用模式
3. 创建（）方法
4. 在ES6之后使用类

继承的实现因对象创建方法而异。本文将解释如何在函数构造函数之间创建继承。

假设您有一个函数：

1 2 3 4

function animal(name, age) {     this.name = name;     this.age = age; }

如果使用new操作符调用animal函数，将创建一个对象。这种对象创建方式也称为“构造函数调用模式”。

1 2 3 4

var dog = new animal('foo', 5); console.log(dog); var cat = new animal('koo', 3); console.log(cat);

对象dog和cat都有自己的名称和年龄属性。如果希望在所有对象之间共享属性或方法，请将其添加到函数原型中。

1 2 3 4

animal.prototype.canRun = function () {        console.log('yes ' + this.name + ' can run !'); }

使用javascript原型链，dog和cat对象都可以访问canrun方法。

1 2 3 4 5

var dog = new animal('foo', 5); dog.canRun(); // yes foo can run   var cat = new animal('koo', 3); cat.canRun(); // yes koo can run

接下来，让我们创建另一个构造函数——人：

1 2 3 4 5 6 7 8

function human(name, age, money) {     this.name = name ;     this.age = age ;     this.money = money; } human.prototype.canEarn = function () {     console.log('yes ' + this.name + 'can earn'); }

此时，人与动物的功能没有任何关系。然而，我们知道人也是动物。人工构造有两个问题。

1. 它有重复的名称和年龄初始化代码。为此，应使用动物建造师。
2. 它与动物建造师没有任何联系

上述两个问题可以通过在动物和人类功能构建者之间创建继承来消除。

您可以通过如下修改人工函数来解决代码复制的问题1：

1 2 3 4

function human(name, age, money) {     animal.call(this, name, age);     this.money = money; }

现在，在人类函数中，我们使用call方法手动传递当前对象作为动物函数中“this”的值。这种方法也称为间接调用模式。现在，可以创建一个人类对象实例，如下所示：

1 2	var h1 = new human('dj', 30, '2000 $'); console.log(h1);

到目前为止，我们已经解决了代码复制的第一个问题，但是人类的功能仍然与动物的功能无关。如果您尝试对h1对象调用canrun方法，javascript将向您抛出一个错误。

1	h1.canRun(); // throw error canRun is not a function

您可以通过将人类功能原型与动物功能构造函数原型链接来解决这个问题。有两种方法可以做到这一点。

使用γ原型

使用object.create（）方法

您可以使用object.create（）链接函数构造函数的原型，如下所示：

1	human.prototype = Object.create(animal.prototype);

您可以使用_uu proto_uuu链接函数构造函数的原型，如下所示：

1	human.prototype.__proto__ = animal.prototype;

更推荐object.create（）方法，因为在许多浏览器中可能不支持_uuProto。在链接原型之后，在一种方式下，您已经在动物和人类函数构造函数之间创建了继承。人的对象实例可以读取动物功能的所有属性，并且可以执行动物功能方法。

下面列出了实现函数构造函数之间继承的完整源代码，供您参考：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

function animal(name, age) {        this.name = name;     this.age = age;    }    animal.prototype.canRun = function () {        console.log('yes ' + this.name + ' can run !'); }    var dog = new animal('foo', 5); dog.canRun();    var cat = new animal('koo', 3); cat.canRun(); function human(name, age, money) {     animal.call(this, name, age);     this.money = money; }    human.prototype = Object.create(animal.prototype);    human.prototype.canEarn = function () {     console.log('yes ' + this.name + 'can earn'); } // human.prototype.__proto__ = animal.prototype; var h1 = new human('dj', 30, '2000 $'); h1.canRun(); h1.canEarn();

要在函数构造函数之间创建继承，请始终执行以下两个操作：

1. 使用call或apply调用父构造函数。
2. 将子构造函数原型链接到父构造函数原型