Objected Oriented Programming in JavaScript.
“You can do almost anything with soup stock.It is like a strong foundation.When you have the right foundation everything taste good.”
This quote struck my mind when I made a resolution to advance my knowledge in JavaScript programming.Putting into consideration, object oriented programming is one of the underlying structures that make programming languages powerful and the paradigm for software development.
OOP is one of the building blocks in JavaScript programming.One of the most popular advantage is that it allows you to break your code into bite-sized problems that can be solved one at a time.Since action is the only antidote, in this post we shall discuss the concept of JavaScript Objected Oriented programming :
OOP uses self-contained pieces to develop applications.The self-contained pieces are called Objects.Objects are based on things in the real world like employee records.
An object is a collection of properties and a property an association between a key and a value.A property value can be a function which is known as a method.
To access the object a method can use this keyword.JavaScript objects can be created using an object literal notation or the constructor function.When a new Object is created the value of this become a new Object.
Differences between an Object Literal and a Constructor Function
The main difference here is what you can do with it. With the constructor function notation you create an object that can be instantiated into multiple instances (with the new keyword), while the literal notation delivers a single object, like a singleton
Using Objects
The two objects vary in how you use them. If the object has been created with the constructor function, you must instantiate it first. On the other hand the literal-notated one is ready for use:
Built-in JavaScript Constructors
JavaScript has built-in constructors for native Objects.
Object Prototypes
Prototypes are the mechanisms by which JavaScript objects inherit features from one another.All objects have a hidden [[prototype]] property that is either another object or null.The object referenced by [[prototype]] is called a ‘Prototype’.
If we want to read a property of an object or call a method and it does not exist then JavaScript tries to find it in the prototype.
An object’s prototype object may also have a prototype object, which it inherits methods and properties from, and so on. This is often referred to as a prototype chain, and explains why different objects have properties and methods defined on other objects available to them.
- Date objects inherit from Date.prototype
- Array objects inherit from Array.prototype
- Person objects inherit from Person.prototype
The Object.prototype is on the top of the prototype inheritance chain:
Date objects, Array objects, and Person objects inherit from Object.prototype.
Using The Prototype Property
Prototype property allows you to add new properties to object constructors:
The property Object has a constructor property by default.Prototype property also allows you to add new methods to objects constructors:
An example to Display the Issue with the Prototypes
i.e when the prototype object contains a property of reference type
- Problem with the prototype: Modifying a property using one object reflects the other object also
In the above example, scholar1 and scholar2 point to the same guests’ array of the prototype object. scholar1 modifies guests property by adding another string in the array.
The guest array exists on Person.prototype, not on scholar1, the changes made in the guest property by scholar1 object is reflected on scholar2.guests also (which points to the same array).
If the intention is to have an array shared by all instances, then this outcome is okay. What if we only wanted to add the string in the property guests of scholar1?
How to Solve the Problem
We can define all the object-specific properties inside the constructor and all shared properties and methods inside the prototype as shown below:
Object.prototype.hasOwnProperty()
The hasOwnProperty() method returns a boolean indicating whether the object has the specified property as its own property as opposed to inheriting it.
Syntax: Obj.hasOwnProperty(prop)
Prop: is the string of the property to be tested.
Return Value: A Boolean indicating whether or not the object has the specified property as own property.
The for … in Loop iterates over inherited properties.
Object.Create()
The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.
Syntax: Object.create(proto, [propertiesObject])
Parameters
proto The object which should be the prototype of the newly-created object.
propertiesobject (Optional)
If specified and not undefined, an object whose enumerable own properties (that is, those properties defined upon itself and not enumerable properties along its prototype chain).
Return value
A new object with the specified prototype object and properties.
The output shows the greeting constructor is under __proto__:
Object.create(proto, [propertiesObject])
CLASSES
ES6, also known as ECMAScript, introduced classes.
A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword Class, and the properties are assigned inside a constructor() method.
The constructor method is called each time the Class object is initialized.The properties are initialized in the constructor method.
Now we can create objects using the School class.
Methods
The method is called by referring to the object’s method followed by parentheses.Parameters go inside the parameters.
Static Methods
Static methods are defined on the class itself, and not on the prototype.
Static methods aren’t called on instances of the class. Instead, they’re called on the class itself.
If you want to use the object inside the static method, you can send it as a parameter:
Inheritance
To create a class inheritance, use the extends keyword.
A class created with a class inheritance inherits all the methods from another class.
The super() method refers to the parent class.
By calling the super() method in the constructor method, we call the parent's constructor method and gets access to the parent's properties and methods.
The output : console.log(williams)
