JavaScript 原型(prototype)继承显示父对象名称

标签 javascript prototype prototypal-inheritance

我一直在阅读有关 JavaScript 原型(prototype)继承和原型(prototype)属性的内容,并且我开始制作 fiddle 来更好地理解这些概念。但我需要帮助来理解为什么我的示例没有像我想象的那样工作。

在下面的示例中,我尝试创建一个层次结构,当您创建对象时,它会告诉您父对象的名称。但是,我的日志总是返回“object”。

一篇文章解释了原型(prototype)链的工作原理,如果在对象上找不到属性,则会检查父级的原型(prototype),并继续向上直到“Object”,如果没有找到,则返回未定义。

这里有一个 fiddle :http://jsfiddle.net/hqozqd0m/

Object.prototype.cname = 'object';

function plant() {
    function parentname() { return this.cname; }
    return {
        parentname:parentname
    }
}
plant.prototype.cname = 'plant';

function tomato() { 
    function parentname() { return this.cname; }
    return {
        parentname:parentname
    }
}
tomato.prototype = new plant(); // <-- settings it to plant as parent

var p = new plant();
var t = new tomato();

console.log(p.parentname()); //object
console.log(t.parentname()); //object

<小时/>

更新的代码 - 相同的结果

Object.prototype.cname = 'object';

function plant() {
    this.sayparentname = function() { console.log(cname); };
}
plant.prototype.cname = 'plant';

function tomato() { 
    this.sayparentname = function() { console.log(cname); };
}
tomato.prototype = new plant();

var p = new plant();
var t = new tomato();

p.sayparentname();
t.sayparentname();

最佳答案

通常构造函数会使用诸如 this.foo = bar 之类的语句修改 new 创建的对象,并且不返回任何内容。那么new表达式的结果就是对象。

但是,如果该函数返回一个对象,则该对象将替换 new 创建的对象;因此,当您使用 new plant() 时,您只是得到一个普通的 Object 实例。

要修复您的代码,您只需如下所示:

function Plant() {
    function parentName() { return this.cname; }

    this.parentName = parentName;
}

关于JavaScript 原型(prototype)继承显示父对象名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32723762/

相关文章:

javascript - RequireJS 和原型(prototype)继承

javascript - Angularjs 服务、工厂和原型(prototype)继承

javascript - 原型(prototype)继承的真实例子是什么?

javascript - 带有 Async/Await 的 TypeScript 和 Promise 包装器。我如何绑定(bind)遗留代码?

javascript - 将对象转换为数组保留索引

javascript - javascript 是否在原型(prototype)之外存储数据类型信息?

javascript - 这个函数是如何在 JavaScript 中沿着原型(prototype)链向上爬的?

javascript - 为什么 process.__proto__ !== process.constructor.prototype ?

javascript - google blockly Jsinterpreter和解释器步骤代码

javascript - php + mysql如何根据表变化轮询数据库