OOP — Object Oriented Programming

Switching from studying humanities to studying tech, I think, makes me understand the logics behind JavaScript in a particular way. It seems that after studying the philosophy of Plato for a few semesters, I see him everywhere, but in Object Oriented Programming, I believe, the connection is clearer. If you are familiar with Plato’s Theory of Forms, you may know that the main idea of the theory is that there is a world that we do not have access to of ideal Forms, where the original creation of Ideas are, and everything on the sensible world (where we live) is just a copy of that Idea. This is just how Object Oriented Programming JavaScript is. In OOP we’ve got classes, this are like the Ideas created in the world of ideal Forms, they do not really exist on the program itself, but they set out the characteristics and definition of what the “copies” of that Class (Idea) should be. The “copies” in OOP, will be called objects, this are instances of a class, they inherit the definition and characteristics of the class they are instantiated from, and they do exist on the program. The objects created from the classes, will not necessarily be perfectly the same, as we can also see with the Ideas and the copies in Plato’s theory. On OOP, this is because, when an Object is instantiated, it inherits all the properties and methods from it’s parent Class, but the property values may change.

Having introduced the main idea of OOP, I am now going to talk about how OOP is implemented in ECMA5 and ECMA6. In the former we use prototypical inheritance, and in the latter we use classical inheritance. There are not really that many differences in how the program is running between the two, since ECMA6 is really doing prototypical inheritance under the hood, but one major difference is that the syntax between prototypical and classical inheritance is different.

Prototypical OOP

In JavaScript, everything inherits from Object. It’s as if every object is part of a tree that branches out from Object. The way we create new prototypes is by just doing a regular function, but with it’s name capitalized. To set the constructor we just set parameters on the function to work like place-holders for the value of our properties, and then inside the code block, we match them up with the adequate property names. Something that is very important to remember, is that before every property name, there should always be the “this” keyword, so that the context can be accessed. Not all property values have to be passed into the constructor, some can just be hard coded. To make new instances of the prototype, you should just initialize a variable with the name you want for the new object to have and then make use the “new” keyword followed by the prototype’s name being called.

function Phone(phoneBrand, version) {
 this.phoneBrand = phoneBrand;
 this.version = version;
}

var iPhone = new Phone(iPhone, 6s);

And when you want to make a subclass and inherit from another class you should call the constructor of the class you want to inherit from, from your subclass.

function PhoneCase(phoneBrand, version, color) {
 Phone.call(this, phoneBrand, version);
 this.color = color;
}

PhoneCase.prototype = Object.create(Phone.prototype. {
 constructor: PhoneCase
});

var chargingCase = new PhoneCase(iPhone, 5s, red);
console.log(chargingCase.version) // 5s

Classical OOP

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.