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

Should you build your own web experimentation solution? Download this whitepaper by Optimizely to find out.

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.

Implementing an Experimentation Solution: Choosing whether to build or buy?

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

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}