Learning JavaScript — Part 20

Constructor functions and the “new” keyword

Constructor functions look very similar to standard functions, however there are some notable differences.

Firstly, with a constructor function, we typically give the const a capital letter to show it’s a constructor function.

Secondly, we assign the arguments to the “this” keyword, which effectively assigns the parameters being passed in to the “this” keyword.

For example….

// constructor function
const Person = function(firstName, birthYear) {
  this.firstName = firstName;
  this.birthYear = birthYear;
};

In the example below, we’ve created a constructor Function called “Person”, which we can then use to create new object instances, when we apply the “new” keyword.

const bob = new Person("Bob", 1984);
const mary = new Person("Mary", 1992);
console.log(bob);
console.log(mary);

which returns…

Person {firstName: 'Bob', birthYear: 1984}
Person {firstName: 'Mary', birthYear: 1992}

Prototypes and Prototypal inheritance

Every object, array, function has a prototype property. If we take the previous example of the “Person” constructor function, we could add a new function to the Person prototype, which would then be accessible to every object created from this constructor function, due to prototypal inheritance. For example…

// create a new function and assign to "Person" prototype
Person.prototype.calcAge = function () { 
  console.log(2022 - this.birthYear);
};
// now it can be used by objects created from "Person"
bob.calcAge();
mary.calcAge();

which returns..

38
30

We can see if we look into bob’s prototype, that the calcAge function is available to him…

We can look at bob’s prototype with a console.log and by using __proto__

console.log(bob.__proto__);

which returns…

{calcAge: ƒ, constructor: ƒ}

The prototype of the bob object, is the prototype property of the Person constructor function.

You can confirm if the object has inherited the property from its prototype or if indeed the object has it’s own property, with the hasOwnProperty() method.

For example..

// add property to prototype
Person.prototype.gender = "male";
console.log(bob.gender);
console.log(bob.hasOwnProperty("firstName"));
console.log(bob.hasOwnProperty("gender"));

which returns…

male
true
false

We should also remember that Person.prototype is itself an object, so it too will have a prototype!

This will be object.prototype and is the top of the prototypal chain.

When we used the hasOwnProperty() method above, that was only because this method is part of the object.prototype

The prototype of bob object was inherited from Person.prototype, and this prototype was inherited from object.prototype, and this hasOwnProperty() method is part of the object.prototype

Arrays also have prototypes and this is what allows us to use various methods on arrays… for example…

const arr = [3,5,8,2,6,2,5,7,8,2,6]
console.log(arr.__proto__);

which returns…

All of these methods were inherited from the Array.prototype

The Array.prototype itself inherits from the object.prototype

Elements also have a prototype, for example a <h1> element, which will inherit from the prototype.