Creating Objects Using Constructors in JavaScript

https://unwinnable.com/2018/04/25/why-i-love-trigun/

There are many ways to create objects in JavaScript. One way is to create a blueprint or constructor before actually building your objects. Let's begin!

In this example, we will create a blueprint or Constructor function called Anime. Anime will become a general blueprint for all the other objects created from it.

What is a Constructor Function?

A constructor is essentially a function that acts as a blueprint for creating objects. A convention for constructors is to always capitalize its function name. View below:

const app = (function(){
  //constructor function
  function Anime(name,type,year,director){
     this.name = name;
     this.type = type;
     this.year = year;
     this.director = director;
   }
console.log( Anime.constructor );
})();

You may hear “constructor function” and “constructor” used differently. In the code above Anime is the “constructor function”. If you console log:

console.log(Anime.constructor);

you get a reference to the Anime constructor function.

ƒ Function() { [native code] }

Now that we have our constructor function called Anime we can “construct” our object instances based on that blueprint. After all, a constructor function is just a blueprint for “constructing” other objects. Let’s create an Anime instance object called “trigun”.

Creating a New Object

const app = (function(){
//constructor function
  function Anime(name,type,year,director){
     this.name = name;
     this.type = type;
     this.year = year;
     this.director = director;
  }
  console.log( Anime.constructor );
//new object instance
const trigun = new Anime("Trigun","post-apocalyptic","1998","Satoshi Nishimura");
console.log(trigun);
})();

“new” keyword

( referring to the new object instance above )

To create a new object instance I used the “new” keyword to create an object based on a constructor ( in this case, Anime ). Adding the “new” keyword is a crucial step when creating an object from a constructor. The new keyword’s responsible for:

1. Creating an empty JavaScript object
2. Linking the instantiated object to another object ( inheritance chain )
3. Making the created empty object “this” ( see 1. )
4. Returning “this” if a function doesn’t run on the correct object

Without the “new” keyword, “this” will look to the window object. When adding methods to your object you will actually be adding them to the window object since “this” is no longer bonded to your object. ES6 has created an error so that the “new” keyword must be used to avoid unnoticed consequences. Let’s console log the new “trigun” object and see what happens:

When console logging the new instance you can see all the properties from the “constructor function” followed by their mapped values. Along with those properties and values, you may notice a __proto__ property.

Prototypal Inheritance

__proto__

This article gives a straight forward explanation of __proto__. __proto__ is an object in every class instance that points to the prototype it was created from. If you check MDN’s page on __proto__ it’s marked as depreciated. Although it’s depreciated in its use, it’s essential to know in order to understand JavaScript’s inheritance rules.

prototype

Every object constructor carries a prototype property.

If I console.log:

console.log( typeof Anime.prototype );

I’ll get back:

object

This shows that there is an object called prototype within your Anime constructor.

Now that we know there is a prototype object within our constructor what do we do with it?

JavaScript uses the prototype object as a base to store information that we want in all our object instances. This information is referenced within the __proto__ property of each instance.

const app = (function(){
//constructor function
    function Anime(name,type,year,director){
        this.name = name;
        this.type = type;
        this.year = year;
        this.director = director;
    }
//adding a watched property to the Anime constructors prototype
Anime.prototype.watched = true;
//object instance
const trigun = new Anime("Trigun","post-apocalyptic","1998","Satoshi   Nishimura");
console.log(trigun);
})();

Above we added a property of “watched” to the constructor's prototype. Once we did that, all instances of the Anime object will have access to the “watched” property. If we do:

console.log(trigun) 

We will see a __proto__ object. When we click on the __proto__ dropdown we find our “watched” property with the value of true.

We can then create more instances of Anime and add more information to Anime’s prototype so that each new instance can inherit it.

Classes

While keeping the previous Anime constructor example in mind, ES6 Classes are “syntactical sugar” over the existing prototypal inheritance model. Here is the new syntax which wraps the constructor function within a Class.

const app = (function(){
//constructor function
    class Anime{
        constructor(name,type,year,director){
            this.name = name;
            this.type = type;
            this.year = year;
            this.director = director;
        }
    }
    Anime.prototype.watched = true;
const trigun = new Anime("Trigun","post-apocalyptic","1998","Satoshi Nishimura");
    console.log(trigun);
})();

When console logging the object instance “trigun”, you will notice that everything is pretty much the same under the hood. We can even see the “watched” property in the __proto__ object.

Conclusion

During this write up, we discussed what a constructor is, prototypal inheritance and the ES6 Class syntax. Learning these concepts deeply will prepare developers for a better understanding of modern JavaScript and working with React Components.

Happy coding!

-lwd
Like Water Design, LLC is a multidisciplinary design studio specialized in eCommerce, modern web experiences and product design

Here are a couple of resources that I found helpful!

Understanding JavaScript Constructors | CSS-Tricks

Inheritance and the prototype chain

JavaScript ES6: Classes