关于原型对象及其在Javascript继承中的作用

Question

我刚刚开始搞乱Javascript继承,并且不能让我围绕这个:

如果我运行此代码:

function Foo(y) {
    this.y = y;
}

Foo.prototype.x = 1;

var Bar1 = new Foo(2);
var Bar2 = new Foo(3);

我希望在内存中有以下"结构": 我在图中搞砸了,Bar2的属性"y"显然值为"3"

幸运的是,我可以通过运行此代码来确认:

console.log("Prototype - x: ", Foo.prototype.x, " y: ", Foo.prototype.y);
console.log("Bar1 - x: ", Bar1.x, " y: ", Bar1.y);
console.log("Bar2 - x: ", Bar2.x, " y: ", Bar2.y);

打印:

Prototype - x: 1 y: undefined
Bar1 - x: 1 y: 2
Bar2 - x: 1 y: 3

纠正我,如果我错了,但是当我尝试访问Bar1和Bar2对象中的属性x时,因为那些对象不是localy有一个名为x的属性,我从那里获得该属性原型链中的下一个对象; 即他们在"_ proto _"属性中存储的引用.

现在是我迷路的时候,因为如果我在那段代码之后改变x的值,就像这样:

Bar1.x = 10;

当我现在跑

console.log("Prototype - x: ", Foo.prototype.x, " y: ", Foo.prototype.y);
console.log("Bar1 - x: ", Bar1.x, " y: ", Bar1.y);
console.log("Bar2 - x: ", Bar2.x, " y: ", Bar2.y);

我得到的是

Prototype - x: 1 y: undefined
Bar1 - x: 10 y: 2
Bar2 - x: 1 y: 3

而不是我期望的:

Prototype - x: 10 y: undefined
Bar1 - x: 10 y: 2
Bar2 - x: 10 y: 3

那时我只能通过假设每个对象都在创建Foo.prototype对象的副本来解释它,但如果我运行这个

console.log(Object.is(Foo.prototype, Bar1.__proto__), Object.is(Bar1.__proto__, Bar2.__proto__));

我明白了true true,所以Bar1,Bar2都在访问同一个对象.

为什么Bar1然后显示x的不同值,如果它们都是从同一个对象获取它？

Answer 1

这行：

Bar1.x = 10;

x不会改变原型中的值。相反，它创建一个新属性 ( x)Bar1并为其分配值10。Bar1因此不再继承x其原型，因为它现在拥有自己的属性x。

Bar2仍然如此，这就是为什么它仍然与原型值匹配的原因。