Useful and Quick Object Oriented JavaScript Tutorial

So, I'm here to share some very useful concepts about OOJS (Object Oriented JavaScript), because if you want to learn scripting languages but worry about their concepts then let's start. I write this article before a month but now with some improvements I'm ready to share Useful and Quick Object Oriented JavaScript Tutorial without wasting your time about what is JS and all.

Quick Object Oriented JavaScript Tutorial:

What is an Object ?

Simply everything objects in Javascript, look below image to clear -

oojs-object

 

In above image, A phone is an Object and it has their own attributes () and Function.

Javascript Object Oriented Programming -

There are four pillars of any programming languages, I'm here only sharing just name because lot's of thing going to describe in this post, you can get brief about once you Google.

1- Inheritance

2- Encapsulation

3- Abstraction

4- Polymorphism

Classified in 2 Category -

i) Standard built-in object (including their methods and properties)

ii) Custom objects (where they would like to create and use their own objects)

object oriented javascript quick tutorial

Way to Create JavaScript Objects:

We can create JavaScript objects by two way:

1- Literals Objects.
2- Constructor Functions.

Let's learn both separately, and I will try to clear your concept quick as per promise.

1- Literals Objects:

This is the basic and first type of JavaScript objects. This format goes like JSON. Here you will create the object using two braces  {}  and their method and properties all are public. Literal object is a single object for all cases, even if you store it in different variables but all of them point to the same object.

Ex-

var my_var = {
 init: function (post) {
 this.post = post;
 }
};
var my_var2 = my_var;

Set the namespace for your JavaScript code.

// Setting the namespace
var my_var = my_var || {};
// Builder for post using the namespace my_var
my_var.Post = function (title) {
 this.title = title;
};
var post = new my_var.Post('Learn quick Object JavaScript');

2- Using Constructor Functions:

We will use functions to define a prototype and it can be self-executable also can use local values, but in a changeable context. It declared and implemented within other functions,and passed as arguments to some other functions as well.
In JavaScript functions are a property of objects, means they have other functions and attributes. As example- name, call(), apply(), length etc.

function Tag(name) {
 this.name = name;
}
 
var tag = new Tag('Post');

Here what we are doing with keyword "new":

  • We are creating a new JS object using {}
  • Define an object's constructor tag as Tag.
  • We are setting the prototype object tag as Tag.prototype
  • Creating a new instance, here Tag executes a function within the limit scope of the new object.

As above we can understand OOJS is based on prototypes, as inheritance like cloning objects that reuse as prototypes. Inheritance target to another object and with all their prototype properties.

Let’s assume a TV object that has all the properties and behaviors of a television, such as LCD/LED, Screen size, Brand, and Model. While cloning of this object we inherit all the properties and behaviors of the TV object.

When we define the prototype property of a function we have to assign a prototype to an object and then build with 'new' operator.

// Set "class" Job
function Job(position, experience) {
 this.position = position;
 this.experience = experience;
}

// If Every Job has the method jobAnniversary
Job.prototype.jobAnniversary = function() {
this.experience++;
}

// Set "class" Candidate
function Candidate(position, experience) {
 Job.call(this, position, experience);
 this.salary = null;
}

// Every candidate inherit from Job
Candidate.prototype = Object.create(Job.prototype);

// Testing
var himanshu= new Candidate('himanshu', 24);
himanshu.jobAnniversary();
console.log(himanshu.experience);

It's on you to start Object oriented JavaScript as per your convenient, constructor or literal. Each has a different way to solve the problem. I tried to make this post simple as I can while following some article based on the same title. I hope you will love it, else let me know your opinion.

* Is this helped you? you can gift us a coffee or share your feedback*

Himanshu is a young engineer living in India. Currently working at BOLD.com as UI Engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seems interesting, go through portfolio: www.himstar.info "Open Source. Millions of open minds can't be wrong!"

Leave a reply:

Your email address will not be published.

Sliding Sidebar

We have 20,000+ active geeks


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page