Question

我有：

主对象

function Fruit() {
    this.type = "fruit";
}

子对象：

function Bannana() {
    this.color = "yellow";
}

继承主属性

Bannana.prototype = Object.create( Fruit.prototype );

var myBanana = new Bannana();

console.log( myBanana.type );

输出：undefined。为什么这不会显示"fruit"作为结果？

Answer 1

为什么这不显示＆＃34;水果＆＃34;结果呢？

因为您永远不会在新对象上设置type。

type不属于Fruit.prototype的属性，而Bannana.prototype = Object.create( Fruit.prototype );所做的只是使Fruit.prototype个属性Banana可用于每个type实例。

Fruit由Fruit函数设置。但是，如果您查看代码，无处您正在执行this.type = "fruit";！行type永远不会被执行！ <{1}}属性魔法不存在。

所以另外来设置原型，你必须执行Fruit。您必须通过super调用父构造函数（就像您在其他语言中一样（现在是ES6））：

function Bannana() {
    Fruit.call(this); // equivalent to `super()` in other languages
    this.color = "yellow";
}

在新的JavaScript版本（ES6 / ES2015）中，您将改为使用classes：

class Banana extends Fruit {
    constructor() {
        super();
        this.color = 'yellow;
    }
}

这是做同样的事情，但为了便于使用，它隐藏在class语法后面。

Answer 2

这太酷了。如果你这样走：

function Fruit() {
    this.type = "fruit";
}
function Bannana() {        
    this.color = "yellow";
}
Bannana.prototype =  new Fruit;
Bannana.prototype.type='flower';
var myBanana = new Bannana();
console.log( myBanana.type );

你会得到一个＆＃34; 花＆＃34;，但如果你这样：

function Fruit() {
    this.type = "fruit";
}
function Bannana() {
    Fruit.call(this);
    this.color = "yellow";
}
Bannana.prototype.type='flower';
var myBanana = new Bannana();
console.log( myBanana.type );

您将获得＆＃34; 水果＆＃34;;

我认为不需要解释，对吗？

Answer 3

你永远不会在Fruit原型对象上放任何东西。您的构造函数初始化实例，而不是原型。

如果你有：

Fruit.prototype.type = "fruit";

然后您的代码将按预期工作。

JavaScript继承Object.create（）无法按预期工作

3 个答案: