[javascript]为什么它独立运行 space？

Question

function Member(){
  this.x="hello";
};
var test = new Member();
Member.prototype.x = "test";
console.log(test.x);
//hello

我最初这样写是为了让一个构造函数期望它的输出是“测试”。但是没有用，结果是“你好”。但是当我将构造函数制作成下面的构造函数时，它起作用了。

function Member(){
  Member.x="hello";
};

我想知道它是如何工作的。谢谢

Answer 1

当您执行 new Member() 时，会发生一些事情，MDN 很好地描述了这些步骤：

Creates a blank, plain JavaScript object.

Adds a property to the new object (__proto__) that links to the constructor function's prototype object

Binds the newly created object instance as the this context (i.e. all references to this in the constructor function now refer to the object created in the first step).

Returns this if the function doesn't return an object.

这意味着在您的示例中：

test 是在使用 new 调用时在 Member 构造函数中创建的 this 对象（即：“实例”）。
test的原型（__proto__属性¹）指向对象Member.prototype.

当您使用 test.x 时，我们首先在 new Member() 创建的实例上查找 x（即：在您的函数中创建的 this 对象和回来）。如果在实例本身上找不到 x，则检查原型（存储在 __proto__ 属性的对象）是否有 x（然后如果找不到在原型上找到我们然后检查原型的原型等等）。

在您的第一个示例中，由于我们能够在对象实例本身上找到值为 "hello" 的 x，因此它记录 "hello" 并且不检查原型.

在您的第二个示例中，由于您的函数没有向 this 添加任何属性，因此 new Member() 返回的实例没有 x 属性就像第一个例子一样（它是一个空对象 {}），所以我们检查原型（从上面的第 2 步我们看到的是 Member.prototype），它确实有一个 x 属性设置为 "test"，因此它记录 "test"。执行 Member.x 将 x 作为属性添加到您的函数对象，但不会影响使用 new.

创建的实例

¹ 请注意，当您需要为 [[Prototype]] 插槽访问/设置对象时，如 RobG pointed out, the use of __proto__ is deprecated. The spec uses an internal slot, [[Prototype]], on the constructed object instance and is used to point to the constructor function's .prototype property. Avoid using __proto__ and instead use methods such as Object.getPrototypeOf(), Object.create() or Object.setPrototypeOf() （尽管使用 setPrototypeOf() 由于性能原因，仍应谨慎使用）

[javascript]为什么它独立运行 space？

[javascript]Why it works in its own space?

javascript

constructor

prototype