jQuery, AngularJS and JavaScript

JavaScript OOP and Prototype-based OOP

June 10th, 2016 / placed in Study. / Tags: , , , , .

JavaScript OOP

JavaScript OOP is about using self-contained chunks of code to develop applications. OOP is short for Object-Oriented Programming. These self-contained chunks of code are called objects. Building applications with objects as our building blocks in JavaScript has more potential when we use great advantages like Inheritance and Encapsulation.

Prototype-based OOP JavaScript

In prototype-based object-oriented programming we create an object. This object can have certain properties and functions. If we create an vehicle, this vehicle can have properties like vehicle.type and vehicle.color to create a simple basic vehicle. You can use this basic vehicle as a prototype for an more specific vehicle, all you need to do is to ‘clone’ that basic vehicle and add some other specific properties to it and you’ll have a custom vehicle! For example:

Then, we add the basic properties to this vehicle:

Now we can simply use it like:

Now we have the basic vehicle, we can create more specific types of vehicles by using our basic vehicle as a prototype like a typical red ferrari:

Now we can create even more different types Ferrari’s!

Now I can check if the properties from parent objects were properly carried over:

The examples above in short, objects can inherit properties and functions from other objects. This is great for re-usability and readability of code.

Understanding the prototype chain

Creating prototypes is pretty simple, but what’s really important is to understand the delegation and implementation of prototypes. When it comes to inheritance, JavaScript has only one construct: Objects. Every object refers to another object called its prototype. That prototype object has a prototype of its own. This goes on until an object is reached with null as its prototype. null, by definition, has no prototype, and acts as the final link in this thing we call the prototype chain. For example:

When logging the ferrari.fuelType we first find the object that ferrari references. Then we look for the fuelType property. Since it’s not there, we look at the parent object and find it there. Then we find the Diesel value it refers to.

Inheritance and Encapsulation

When it comes to Object-Oriented Programming in JavaScript there are two important principles: Object Creation Patterns (Encapsulation) and Code Reuse Patterns (Inheritance). As shown in the examples above, we already know that inheritance refers to an object being able to inherit properties and methods from other objects. Encapsulation refers to enclosing all of the functionalities of an object so that the objects internal methods and properties are hidden from the rest of the application. Both concepts are very valuable because it allows programmers to build applications with reusable code, maintained and efficient.

When we are building an application, we create many objects. Object can be created in many different ways, for example the literal notation:

Objects created using object literals are singletons. This means when a change is made to the object, it affects that object across the entire script. However, object defined with a function constructor lets you have multiple instances of that object. This means change made to one instance, will not affect other instances. For example:

So, when to use one over the other? If you need multiple instances of the object you should use the constructor function, if you need just one instance of the object then use literal notation. In addition, you could always apply the KISS principle. If you don’t need anything more than just a simple container of data, go with a literal notation. For reusable purposes you’ll want to you constructor objects. For example an website where u could reserve seats for restaurants:

Like the example above, some web shops have hundreds of products, you don’t want to define every single product using literal notation. Therefore you’re best off with constructors. But of course there is a lot more to constructors than the given examples. Therefore, in my next article I’m writing about Design Patterns, how to use them and why you should use them. I’ll be posting the article somewhere in the next two weeks.