Objects and prototypes in JavaScript

JavaScript did not have the provision of class like any other language till ES2015, although the concept of Objects in JavaScript is pretty similar to other languages. Objects in JavaScript resemble to real life objects only, like a car or tree, etc.

It is safe to say,

“Everything in JavaScript is an Object.”

An object is a collection of properties, and a property is an association between a name (or key) and a value. Value can be anything, it can be a function (method) or even another object.

There are five patterns via which we can create Objects.

· Constructor Pattern

· Factory Pattern

· Prototype Pattern

· Dynamic Prototype Pattern

· Using Object.create() method

Factory Pattern

Factory pattern

As we can see in the example above, ‘carfactory’ function acts as an object creation factory function, which on being invoked every time, returns a new object.

Constructor Pattern

Constructor pattern

In constructor pattern, object type is defined by a constructor function and is an object instance is created using ‘new’ keyword.

As we can also observe, property of an object can also hold another object, like Car.engineSpec is accepting another object of type Engine and its property name can be accessed as well.

Prototype Pattern

Prototype pattern

personProto prototype details

As we can see, the object type has property called ‘prototype’ attached to it and the parameters defined are store in that space.

However, the value of parameters defined are default and can be overridden by creation of a fresh object. Have a look:

It will print ‘Ram’ as it is stored as a default. We will explore this concept more in Prototypical inheritance.

Disadvantage: This approach can become cumbersome.

Dynamic Prototype pattern

Dynamic prototype pattern

The point to note here is, it uses the same Constructor pattern discussed above, however, while creation of an object, it will check if ‘printDetails’ function is available on ‘dynamicPerson’, and if not, it will create this function on dynamicPerson’s prototype. However, from next object creation, this printDetails function will always be available in the shared space called ‘prototype’.

Using Object.create() method

With ECMA5, a new method was introduced for creation of Objects, i.e. Object.create(). Calling this method creates an object, and prototype of this object is the first argument of ‘create. function.

Object.create()

Inheritance in JavaScript

Till now, we what ‘prototype’ of an object means in JavaScript. In this topic, we will cover prototype-based inheritance in JavaScript.

Since, it is clear now that JavaScript ha sonly one construct: objects. Nearly all objects in JS are instances of ‘Object’ which sits at the top of (prototypical) chain.

Whenever, we try to seek a property on a JS object, the property will be sought not only on the object but also prototype of an object, prototype of the prototype (since, prototype can itself be an object, as seen in example of Object.create()), and so on until we get the property with matching name or we reach end of this chain.

Going ahead with last example,

Prototype chain

Now, we can clearly see, how the chain works. If a property is present on object, its value will be retrieved from the object and no look up will be performed, however, if it is not present, the look up will happen till the top of chain is reached, in case property is not present.

So, if we try to print details of ‘anotherObj’, we can see, it is created from an object which in return is created from ‘Object’. The prototype chain of an object can be accessed using the keyword ‘__proto__’.

‘__proto__’ means parent/creator.

Let us look at another example, where we try to create an object using functions. Function in JavaScript is also an Object, as we shall see in the example below.

NOTE: Every object in JavaScript has a ‘prototype’ property attached to it and has a ‘__proto__’ which refers to its parent/creator.

function expression and prototype chain

In example above, ‘temp’ will have access to all the methods and properties defined on its parent object’s prototype.

Object hierarchy

So, we learnt in this article, how JavaScript is an ‘Object’ specific language, and everything in JavaScript is inherited from objects, well almost everything to be fair.

References:

Working with objects