JavaScript Objects, prototype, constructor, & Object constructor

This post is part of a series of posts on JavaScript object-oriented programming. Link to the series are as follows:

This series is as follows:

JavaScript Objects

According to Mozilla, JavaScript is designed on a simple object-based paradigm, and an object is a collection of properties, and property is an association between a name(or key) and a value. A property's value can be a function, in which case the property is known as a method.

In other words, an object is a collection of key=value pair.

e.g firstname = "John", lastname = "Fischer" . These two key-value pair can make up an object

Objects & properties

To represent a Person object in JavaScript, let's use Object with is JavaScript in-built. It's the low-level way of creating an object.


    var person = new Object();
    person.firstname = "John";
    person.lastname = "Fischer"
    person.age = 24

The person object has three properties, firstname, lastname, and age. Remember a property's value can also be a function which is refered to as a method. Methods add behaviour to an object. Let's add a behaviour to the person object.


    person.showSkill = function(){
         console.log("I can code in JavaScript")
    }

It's possible to add more property to the object because JavaScript is a dynamic language and that's powerful.

Prototypes

Now, this is the main thing that answers all questions you may have about OOP in JavaScript.

What is prototype ?
In simple English, a prototype is a blueprint, first design, a layout etc. It is what it says.

In almost every invention that has ever existed, they can all be traced to a prototype or a blueprint of some sort.

Note: When an object is created in JavaScript, a prototype object is also created and associated with that object.This happens all the time and almost all JavaScript's object prototype is Object

Let's inspect the person object we created earlier

Almost every object in JavaScript has prototype pointing to Object in JavaScript.

An object's prototype can be accessed by using the __proto__ or prototype properties.

The prototype property of an object is used to access an object's prototype in constructor functions, functions that are instantiated using the new keyword

__proto__ property is used to access prototype on object's instance.

e.g person.__proto__ & <constructor function >.prototype. The person object we saw earlier is an example of an instance of an object which is Object, we can say person object is an instance of Object. From the person object above, we can clearly see there's no prototype property, but __proto__ property.

constructor

Constructor is found on the prototype object's property; it's a pointer or reference back to an object as the creator. This feature can be dynamically used to create an object dynamically, but that's a more advanced topic.

Object constructor

All objects in JavaScript are descended from Object; all objects inherit methods and properties from Object.prototype

The Object constructor creates an object wrapper for the given value.

Every property available on the Object prototype is also available to all object created in javaScript. Object represents the global JavaScript Object. Object constructor and methods are preffered way of implementing prototypical inherirance and object creation. We will be seeing more of the Object constructor in action in the next series.

In conclusion, almost everything in JavaScript resolves around Object. Understanding how Object works under the hood will pave way to understanding how OOP work in JavaScript. If the concepts of prototype is not very clear. We shall cement that in the next series.

Happy coding !