javascript：关于原型继承的一个令人困惑的地方答案

【问题标题】：javascript: one confusing point about prototype inheritancejavascript：关于原型继承的一个令人困惑的地方
【发布时间】：2017-03-09 03:43:38
【问题描述】：

我在我的项目中遇到了一个问题，它与JS的原型继承有关。并将主要问题抽象如下：

var parentObj = {
    value:"parent value",
    obj: {
        obj: "parent obj value"
    }
}

var childObj = Object.create(parentObj)

以字面量对象的方式创建parentObj，并在其基础上创建childObj，并将其作为原型。

第一种情况如下：

childObj.value ="child value"
childObj.obj = {obj:"child obj value"};
console.log(parentObj)
console.log(childObj)

输出是：

{ value: 'parent value', obj: { obj: 'parent obj value' } }
{ value: 'child value', obj: { obj: 'child obj value' } }

这个结果符合预期。

但是对于第二种情况如下：

childObj.value ="child value"
childObj.obj.obj = "child obj value";
console.log(parentObj);
console.log(childObj);

输出是：

{ value: 'parent value', obj: { obj: 'child obj value' } }
{ value: 'child value' }

parentObj 已更改。这个结果让我有点困惑，有什么帮助吗？

【问题讨论】：

我认为它只为子对象返回“子 obj 值”。你能再检查一次吗？或者检查 childObj.__proto__，它会显示 parentObj。
@Nitesh，我确认了我发布的结果。
读取childObj.obj属性使用原型继承，得到parent.obj。此时，childObj.obj 和 parentObj.obj 是对同一对象的引用，因此对该对象的修改通过这两种方式都是可见的。

【解决方案1】：

当您使用x = Object.create(y) 时，您将获得一个对象x，并将y 作为其__proto__ 属性。

__proto__ 允许在 JS 中进行属性委托。

属性委托意味着当你向一个对象请求一个属性时，如果该对象没有它，该对象将向它的父级请求（__proto__）。如果父对象也没有，那么它会询问它的父对象。

如果在链耗尽之前找到值，则返回，否则返回undefined。

你的情况

var parentObj = {
    value:"parent value",
    obj: {
        obj: "parent obj value"
    }
}

var childObj = Object.create(parentObj)

parentObj 是childObj 的__proto__

console.log(childObj.__proto__ === parentObj) // true

另外，childObj 没有拥有自己的属性，名为 .obj 或 .value。您可以使用Object.getOwnPropertyNames 进行检查。这是确定对象上是否存在属性的唯一方法。

console.log(Object.getOwnPropertyNames(parentObj)) // ["value", "obj"]
console.log(Object.getOwnPropertyNames(childObj)) // []

当您执行childObj.obj.obj = ... 时，您修改了对象.obj 上的属性parentObj.obj。

相比之下，当您执行childObj.obj = ... 时，您会在childObj 上添加一个新属性.obj。

childObj.obj = "child obj value"
console.log(Object.getOwnPropertyNames(childObj)) // ["obj"]

PS：如果你想了解更多关于hte的话题，我推荐http://www.javascripttutorial.net/javascript-prototype/

【讨论】：