title: What does 'new' do to modify the `this` object in a function?
body: <p>What does the <code>new</code> keyword do that allows the following binding on the <code>this</code> object:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Person(first, last) {
      this.first = first;
      this.last = last;
  }
  Person.prototype.greet = function() {
      console.log(`Hello, ${this.first} ${this.last}.`);
  };
  let p = new Person('Tom', 'Jones');
  p.greet();</code></pre>
  </div>
  </div>
  </p>
  <p>Whereas without the <code>new</code> keyword, <code>this.first</code> would raise an error since it is undefined. Conceptually speaking, what is <code>new</code> doing here in how it modifies the function?</p>
  <p>Without <code>new</code>:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Person(first, last) {
      this.first = first;
      this.last = last;
  }
  Person('Tom', 'Jones');
  // TypeError: Cannot set property 'first' of undefined</code></pre>
  </div>
  </div>
  </p>
  <hr />
  <p>And without using <code>new</code> seems the following is a crude way to simulate it:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Person(first, last) {
      this.first = first;
      this.last = last;
      return this;
  }
  Person.prototype.greet = function() {
      console.log(`Hello, ${this.first} ${this.last}.`);
  };
  
  Person.prototype.greet.call(Person.call({}, 'Tom', 'Jones'));</code></pre>
  </div>
  </div>
  </p>