Mastering Hard Parts of JavaScript: Prototype & Class III

Using the new keyword

Exercise 5

Create a function PersonConstructor that uses the this keyword to save a single property onto its scope called greet. greet should be a function that logs the string 'hello'.

function PersonConstructor() {
  // add code here
}

const simon = new PersonConstructor();
simon.greet();
// -> Logs 'hello'

Solution 5

function PersonConstructor() {
  this.greet = function () {
    console.log("hello");
  };
}

Wait, what's happening here? Actually nothing we have not seen before. The new keyword is a modifier, it makes some changes to the function that follows it (in this case the PersonConstructor function). What changes you ask? Nothing we haven't seen in previous exercises. It basically creates a new empty object, sets its [[prototype]] correctly, assigns it to the value this and returns this object. We can of course add new properties to this this object, which will be methods. And we're adding a greet method here to our object.

new doesn't do anything magical. It just automates what we've been doing manually until this point, create an empty object, set its [[prototype]] and return it. That's it!

Exercise 6

Create a function personFromConstructor that takes as input a name and an age. When called, the function will create person objects using the new keyword instead of the Object.create method.

function personFromConstructor(name, age) {
  // add code here
}

const mike = personFromConstructor("Mike", 30);
console.log(mike.name); // -> Logs 'Mike'
console.log(mike.age); //-> Logs 30
mike.greet(); //-> Logs 'hello'

Solution 6

function personFromConstructor(name, age) {
  const person = new PersonConstructor();
  person.name = name;
  person.age = age;
  return person;
}

A combination of using new to create a new object, but then giving it extra properties (which are passed as parameters) and returning this object. Nothing terribly new happening here, just a combination of the two patterns we've seen before.

Exercise 7

Without editing the code you've already written, add an introduce method to the PersonConstructor function that logs "Hi, my name is [name]".

mike.introduce();
// -> Logs 'Hi, my name is Mike'

Solution 7

PersonConstructor.prototype.introduce = function () {
  console.log(`Hi, my name is ${this.name}`);
};

Notice that this is very similar to Exercise 4, we are adding a method to an object. But which object? In Exercise 4, we had manually defined the name of our object as personStore so we simply added introduce as a property of that object. Here we don't have the name of the object that the JS engine automatically creates for us using the new keyword, so where can we store our functions? The answer is the (confusingly named) property prototype, which itself is an object.

Remember that all functions are objects in JavaScript? So PersonConstructor is a function which we can execute when we use (). But it's also an object, and we can access its properties like any other object using the dot notation. So in order to add any methods to our personConstructor function, we access its prototype property and add our methods there.

Spend some time to compare and contrast exercises 2, 3 and 4 with exercises 5, 6 and 7. You'll see that they are fundamentally doing the same thing. This comparison should make clear what the keyword new does and what the property prototype refers to.