Object Oriented JavaScript: Objects, Encapsulation & Abstraction


oopjsHi Folks, here goes a quick post regarding the most important & frequent concepts of Advance JavaScript or we can say Object Oriented JavaScript.

Objects are the key concepts of JavaScript so lets quickly start with some code and concepts.
We create objects with methods, properties and attributes, we make them bundled inside that object it’s encapsulation, these methods & attributes are abstracted from other objects, this is abstraction.

JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.” : ~mozilla mdn

2 principles with oops in JS are:

1- Object Creation Patter ( Encapsulation )

2- Object Reuse Pattern ( Inheritance )

There are many object creation ways:

1- Ubiquitous Object literal:

var myOoj =  {
    name: "Nikki",
    city: "New Delhi",
    loves: "so many"
}

2- Prototype Pattern

function myFun() {};
myFun.prototype.name = "Nikki";
myFun.prototype.city = "New Delhi";
var myFun1 = new myFun();
console.log(myFun1.name); //Nikki

3- Constructor Pattern:

function myFun (name, city, loves){
    this.name = name;
    this.city = city;
    this.loves= loves;
}
var myFun1 = new myFun ("Nikki", "New Delhi", "so much things");
console.log(myFun1.name); //Nikkia

Although there are so many ways of object creation, but the best way of object creation could be a combination of constructor/prototype pattern.

Ex. encapsulation

var prop1 = "one"; //private
this.prop2= "two" //public
var tc = new test();
var tp1 =tc.prop1; //undefined: because prop1 is private;

without using this keyword function and variables are private.

So conceptually we can say that, you can define and create your own objects.

There are different ways to create new objects:

  • Define and create a single object, using an object literal.
  • Define and create a single object, with the keyword new.
  • Define an object constructor, and then create objects of the constructed type.

In ECMA5* The Object.create() method creates a new object with the specified prototype object and properties.

Object.create();

Stay tuned for some advanced concepts of JavaScript.

Love what you do & do what you love-  stay blessed!!


KNOLDUS-advt-sticker

About Nikhil Kumar

Software Consultant at Knoldus Software LLP.
This entry was posted in Scala and tagged , , , , , . Bookmark the permalink.

5 Responses to Object Oriented JavaScript: Objects, Encapsulation & Abstraction

  1. Sorin says:

    Hello,

    I’m not a very good javascript developer but regarding your last code snippet I think you missed some line codes. For example, shouldn’t “test” method be defined somewhere? Why “prop1″is private and “prop2” is public? I really think you have some missing libe codes because that last snippet doesn’t make any sense.

    Best regards,
    Sorin

    • Nikhil Kumar says:

      Hi Sorin, the last code snippet is just to inform the other way of creating Objects in ES5+ and does not contains any other code blocks, The Object.create() method can just as adeptly create our Car object. It accepts either one or two properties as follows:
      Object.create(proto [, propertiesObject ])
      and for the prop1 and prop2 it infers that variable those are without this inside objects are private and can be accessed only by using the public method of that object.

    • Joe Velez says:

      It’s regarding encapsulation… It’s correct, but the code doesn’t provide enough complete code to make it obvious

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s