当我们使用 new 关键字时与创建对象的过程混淆答案

【问题标题】：Confusion with process of creation an object when we use new keyword当我们使用 new 关键字时与创建对象的过程混淆
【发布时间】：2019-07-19 12:11:12
【问题描述】：

我正在学习 JS，对使用 new 关键字创建对象的幕后发生的事情有些困惑。我发现，当我们使用 new 关键字时，基本上会发生三件事：

一个新的空对象被创建并分配给它。

函数体执行。通常它会修改它，向它添加新属性。

返回 this 的值。

看，在第二步中，当函数体执行时，它是否会运行所有的函数体代码并将所有具有“this”的函数和属性放入在第一步中创建的对象中？我的意思是，在步骤 2 中运行函数体的原因是什么。这是示例代码：

function PageState(){
  let currentState = new homeState();

  this.change = function(state){
    currentState=state;
  }
}

const page = new PageState();

function homeState(){
  document.querySelector('.div').style.width = "100px";
}

【问题讨论】：

贴一些代码minimal reproducible example
构造函数代码初始化新对象。它可能什么都不做，也可能做很多事情；这完全取决于应用程序。
@zer00ne，已发布
@zer00ne，只有一个问题，它是否运行所有主体代码并放置所有具有“this”的函数和属性（例如：this.car="BMW" 和 this.drive=function (){}) 到在步骤 1 中创建的对象？所以，运行函数体的原因是找到分配给“this”的属性和函数，并将它们放入步骤1中创建的对象中。对吗？希望清楚
是的，它会运行所有代码，直到 return 或最后一条语句，以先到者为准。该代码并不是特别有启发性。 currentState 最初引用一个新的 homeState 实例，但通过 change 方法设置它会将该引用替换为一个新值，并且不会返回任何内容。也没有任何方法可以读取该值。

标签： javascript

【解决方案1】：

在这段代码sn-p中，第1步自动发生，然后我将一些成员（属性或方法）分配给this这是第2步，然后第3步，this被返回。

调用const object1 = new MyObject() 意味着创建一个对象，其中greeting 设置为'Hi'，name 设置为'Tim'，getMessage 设置为返回连接消息的函数；然后将该对象分配给 object1。

你可以通过调用const object2 = new MyObject();来创建一个新的MyObject实例，当函数运行时，会有一个新的this。

您可以修改您的对象而不影响用于创建其他对象的原始函数/对象。

function MyObject() {
  this.greeting = 'Hi';
  this.name = 'Tim';
  this.getMessage = function() {
    return this.greeting + ' ' + this.name + '!';
  }
}

const object1 = new MyObject();
const object2 = new MyObject();
object2.greeting = 'Yo';
object2.name = 'Sam';
const object3 = new MyObject();

console.log( object1.getMessage() );
console.log( object2.getMessage() );
console.log( object3.getMessage() );

【讨论】：

感谢您的友好回答，我能想象这样吗？在步骤 2 中运行函数体的原因是找到分配给“this”的所有属性和函数（例如：this.car= "BMW" 和 this.drive=function(){}) 并将它们放入步骤 1 中创建的函数中。对吗？
是的。将其视为在第一步中创建的object，而不是在第一步中创建的函数