开发者问题收集

如何链接两个构造函数并将它们作为原型继承到一个对象？

2018-01-19
816
javascript json ecmascript-6 ecmascript-5 prototype-chain

我正在使用 JavaScript 中的 prototypes （我是 JS 新手）并坚持使用以下 JS 代码片段：

我创建了两个函数：

函数 1 

function sample1() {
    this.uname = "Andrew";
}

函数 2 

function sample2() {
    this.age = 21;
}

我将 sample2 的属性继承到 sample1 ，如下所示： 

sample1.prototype = sample2;

到目前为止，一切正常，就像我可以看到 sample1 以 sample2 作为其原型。但是，问题在于使用 sample1 创建对象时，该对象包含 sample2 的属性。 

let test = new sample1;

现在，尝试访问 sample1 的属性会给出正确的输出。 

test.uname;

但是，尝试访问 age 会给出 undefined 的输出。

问题：

如何使用 test 对象访问 age 属性？

注意：以上操作是使用 Chrome 开发者工具 - 控制台尝试的

谢谢。

2个回答

您的 uname 和 age 属性由构造函数直接在其初始化的每个实例上创建。这里没有必要使用原型继承。只需运行两个构造函数： 

function sample2() {
    this.age = 21;
}
function sample1() {
    sample2.call(this); // runs the other constructor on this instance
    this.uname = "Andrew";
}

当覆盖方法时，这非常类似于 super 调用。

I am working with prototypes in JavaScript

还没有 :-) 您的原型对象是空的。

I inherited the properties of sample2 to sample1 as follows: 

sample1.prototype = sample2;

呃，您不应该这样做。 sample2 是一个函数对象，您通常不会希望从中继承任何东西。请注意， sample1.prototype 是使用 new sample1 创建的所有实例都将从中继承 - 它们不是函数。您可能正在寻找 

sample1.prototype = Object.create(sample2.prototype);
Bergi
2018-01-19

这是在 ES5 中构建原型链的正确方法。

从您的基类开始： 

// base class definition
function Sample1(name) {
    this.uname = name;
}

// with an example function stored on the prototype
Sample1.prototype.getName = function() {
    return this.uname;
}

然后使用适当的原型链对其进行子类化： 

// create the sub-class constructor
function Sample2(name, age) {
    // invokes superclass constructor, passing any params it needs
    Sample1.call(this, name);

    // define subclass per-instance properties
    this.age = age;
}

//
// *** THIS IS THE IMPORTANT BIT ****
//
// create a correctly chained prototype for Sample2
Sample2.prototype = Object.create(Sample1.prototype);

// and then re-associate the correct constructor method
// to assist with debugging, console.log, etc
Sample2.prototype.constructor = Sample2;

// and add methods to it
Sample2.prototype.getAge = function() {
    return this.age;
}

然后您可以使用新继承的“类” 

// pass multiple parameters, and then query the object
var test = new Sample2("Andrew", 21);
console.log(test.getName());
console.log(test.getAge());

// this should show "Sample2"
console.log(Object.getPrototypeOf(test));

// these should both be "true"
console.log(test instanceof Sample2);
console.log(test instanceof Sample1);
Alnitak
2018-01-19