Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Object-Oriented JavaScript: Objects, Encapsulation, and Abstraction (With Examples)

DZone's Guide to

Object-Oriented JavaScript: Objects, Encapsulation, and Abstraction (With Examples)

Check out this quick post on the basics of objects, encapsulation, and abstraction in object-oriented JavaScript. Examples are included.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Hi folks, here goes a quick post regarding the most important and frequently used concepts of advanced JavaScript... or should we say object-oriented JavaScript.

Objects are key concepts of JavaScript, so in just a bit we'll get into some code to help us better understand these concepts.

We create objects with methods, properties, and attributes. When we make them bundled inside an object it’s known as encapsulation. When these methods and attributes are abstracted from other objects, this is known as 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

Two principles with OOP in JS are:

  • Object Creation Patter (Encapsulation)

  • Object Reuse Pattern (Inheritance)

There are many ways to create objects...

  1. Ubiquitous Object Literal

  2. var myOoj =  {
        name: "Nikki",
        city: "New Delhi",
        loves: "so many"
    }
  3. Prototype Pattern

  4. function myFun() {};
    myFun.prototype.name = "Nikki";
    myFun.prototype.city = "New Delhi";
    var myFun1 = new myFun();
    console.log(myFun1.name); //Nikki
  5. 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 many ways to go about object creation, the best way for object creation could be a combination of the constructor and prototype patterns.

Here's an example of 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 in JavaScript.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
javascript ,inheritance javascript ,encapsulation ,abstraction ,object oriented programming ,web dev

Published at DZone with permission of Nikhil Kumar. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}