Question

我正在努力访问在子对象上设置的属性并通过其原型上的方法访问它。

var Parent = function () {
    this.getColor = function () {
        return this.color;
    };
};

var Child = function () {
    this.color = red;
};

Child.prototype = new Parent;

var Test = new Child();

console.log(Test.getColor());
=> undefined

感谢任何和所有的帮助。

Answer 1

以下是我的表现

function Parent(color) {

  function getColor() {
    return color;
  }

  // export public functions
  this.getColor = getColor;
}

现在是Child

function Child(color) {
  Parent.call(this, color);
}

Child.prototype = Object.create(Parent.prototype, {
  constructor: {value: Child}
});

让它看起来有用

var c = new Child("red");
c.getColor(); // "red";

<强>解释

Child构造函数的重要位

确保使用Parent实例（Child）
的上下文调用this构造函数
```
Parent.call(this, color);
```
根据Child.prototype
设置Parent.prototype
```
Child.prototype = Object.create(Parent.prototype, {
  constructor: {value: Child}
});
```
您可以看到util.inherits的node.js实现使用了类似的方法。

这个有点复杂的行为你做了两件事。 1）它避免不必要地调用父构造函数，2）它正确设置constructor属性。
```
var c = new Child("red");
c instanceof Child;  // true
c instanceof Parent; // true
c.constructor.name;  // "Child"
```
但是使用你的代码，你会看到
```
var c = new Child("red");
c instanceof Child;  // true
c instanceof Parent; // true
c.constructor.name;  // "Parent"
```
这对您来说可能是一个问题，也可能不是，但根据您希望如何使用您的父/子对象，可能很难以编程方式区分哪些对象来自Parent构造函数以及哪些是来自Child构造函数。

好的，让我们通过在对象本身上分配color属性来看到另一种方法

function Parent(color) {
  this.color = color;
}

我们会将getColor方法直接添加到Parent.prototype

Parent.prototype.getColor = function getColor() {
  return this.color;
};

Child构造函数将保持不变。请记住，我们将使用上面使用的相同继承模式

function Child(color) {
  Parent.call(this, color);
}

Child.prototype = Object.create(Parent.prototype, {
  constructor: {value: Child}
});

最后，让我们使用getColor方法

var c = new Child("red");
c.getColor(); // "red"

或者您可以直接访问对象上的属性

c.color; // "red"

JavaScript中的原型和属性继承

1 个答案: