OOPS in JavaScript

Oops in JavaScript

JavaScript is object oriented programming language and like other object oriented programming languages (C#, Java etc.), it follows the 4 pillars of any object oriented programming language –

Ø  Encapsulation

Ø  Inheritance

Ø  Abstraction

Ø  Polymorphism

1. Encapsulation is one of the pillars of object oriented programming language. Properties provide encapsulation. If you use public fields you cannot control on what is assigned and returned from that public field.

Using properties you can control on what values can be assigned. You can also use properties to create just read-only or write-only properties.

Since JavaScript is also an object oriented programming language, objects in JavaScript can also have static and instance fields and methods.

2. Inheritance: - Like other Object oriented programming languages i.e. C# and Java ; to implement inheritance, a class inherits from another class. In JavaScript, we don't have the concept of classes, so inheritance in JavaScript is prototype-based. This means to implement inheritance in JavaScript, an object inherits from another object. 

It use hasOwnProperty() method to determine if a property is defined on the actual object or it's prototype.

e.g.:-

<script type="text/javascript">

    var Employee = function (name) {

        this.name = name;

    }

    var PermanentEmployee = function (annualSalary) {

        this.annualSalary = annualSalary;

    }

    var employee = new Employee("EmpName");

    PermanentEmployee.prototype = employee;

    var pe = new PermanentEmployee(1500);

    document.write("Employee.name: " +

                     employee.hasOwnProperty('name') + "<br/>");

    document.write("Employee.annualSalary: " +

                     employee.hasOwnProperty('annualSalary') + "<br/><br/>");

    document.write("PermanentEmployee.name: " +

                     pe.hasOwnProperty('name') + "<br/>");

    document.write("PermanentEmployee.annualSalary: " +

                     pe.hasOwnProperty('annualSalary') + "<br/>");

</script>

Output :

Employee.name: true

Employee.annualSalary: false

PermanentEmployee.name: false

PermanentEmployee.annualSalary: true 

3.  Abstraction Object oriented programming languages like C# and Java, support abstract classes. Abstract classes are incomplete. So, trying to create an instance of an abstract class raises a compiler error. Abstract classes can only be used as base classes. Since JavaScript is also an object oriented programming language, it also supports the concept of abstract classes.

e.g.:-

<script type="text/javascript">

    // Create a Shape object which is abstract

    var Shape = function () {

        this.shapeName = "None";

        throw new Error("Cannot create an instance of abstract class");

    }

    // Error : Cannot create an instance of abstract class

    // var shape = new Shape();

    // Add draw function to the Shape prototype

    // Objects derived from Shape should be able to call draw() method

    Shape.prototype.draw = function () {

        return "Drawing " + this.shapeName;

    }

    // Create a Circle object

    var Circle = function (shapeName) {

        this.shapeName = shapeName;

    }

    // Make shape the parent for Circle

    // Object.create() allows to create an object without using constructor

    Circle.prototype = Object.create(Shape.prototype);

    var circle = new Circle("Circle");

    // Since Circle inherits from abstract Shape object, it can call draw() method

    document.write(circle.draw());

    alert(circle instanceof Circle); // Returns true

    alert(circle instanceof Shape);  // Returns true

</script>

4. Polymorphism:-  Since JavaScript is also an object oriented programming language, it also supports the concept of Polymorphism.

e.g.:-

<script type="text/javascript">

    // Shape object is be the base object

    var Shape = function () { }

    // Add draw function to the Shape prototype

    // Objects derived from Shape should be able to override draw() method

    Shape.prototype.draw = function () {

        return "I am a generic shape";

    }

    // Create a Circle object

    var Circle = function () { }

    // Make shape the parent for Circle

    Circle.prototype = Object.create(Shape.prototype);

    // Circle object overrides draw() method

    Circle.prototype.draw = function () {

        return "I am a circle";

    }

    var Square = function () { }

    Square.prototype = Object.create(Shape.prototype);

    Square.prototype.draw = function () {

        return "I am a square";

    }

    var Triangle = function () { }

    Triangle.prototype = Object.create(Shape.prototype);

    var shapes = [new Shape(), new Circle(), new Square(), new Triangle()];

    shapes.forEach(function (shape) {

        document.write(shape.draw() + "<br/>")

    });

</script>

Ouptut:

I am a generic shape

I am a circle

I am a square

I am a generic shape  

Objects in JavaScript

Here objects can be broadly classified into 2 categories –

1. Standard built-in objects: There are already many of the JavaScript standard built-in objects. Examples include string, array, RegExp, Date etc.

var currentDate = new Date();

2. Custom objects: In C#, to create a custom object, we create a Custom class and then create an instance of a class. In JavaScript we don't have classes. Instead we use functions. In JavaScript there are two ways to create a custom object.

Ø  Constructor function

Ø  Literal notation 

What is the difference between creating an object using constructor function and literal notation?

·         In the constructor function the properties and their values separated using an equal-to sign(=) whereas in the literal version, they are separated using a colon (:)

·         In constructor function at the end of each property you can have a semi-colons (;) whereas in the literal version properties must be separated with a comma (,)

·         With literal notation you have already created an object, so to access the value you simply use object.property. With the constructor function you have to first create an instance and then use the created instance and the property name separated by DOT as shown below.

JavaScript is object oriented programming language, so objects in JavaScript can also have private and public fields and functions.

Private fields - Declared using the ‘var’ keyword inside the object, and can only be accessed by private functions and privileged methods.

Public fields - Declared using ‘this’ keyword and are available outside the object.

Private functions - Declared inside the object and can be called only by privileged methods.

Public methods - Defined by using the object's prototype property and are available both within and outside the object.

Privileged methods - Declared using ‘this’ keyword and are available both within and outside the object.

Ø  Privileged methods are created using "this" keyword and Public methods are created using prototype property of the constructor function.

Ø  Privileged method can access private variables and methods

Ø  Public methods can call Privileged methods but not Private methods.

Ø  Like Public methods, Privileged methods are also available outside the constructor function.

Static members in JavaScript

Since JavaScript is also an object oriented programming language, objects in JavaScript can also have static and instance fields and methods.

What is the difference between static member and instance member and when to use one over the other?

An instance member belong to a specific instance. So if I create 3 instances (objects) there will be 3 copies of instance fields in memory whereas there will ever be only one copy of a static field no matter how many instances we create.

Ø  Define a static member using the name of the constructor function.

Ø  To invoke a static member use the name of the constructor function.

Ø  To invoke an instance member use the instance of the constructor function.

e.g.

<script type="text/javascript">

    function Employee(name) {

        this.name = name;

        this.getName = function () {

            return this.name;

        }

    }

    var e1 = new Employee("Vishal");

    var e2 = new Employee("Amit");

    document.write("e1.name = " + e1.getName() + "<br/>");

    document.write("e2.name = " + e2.getName() + "<br/>");

    //    Output:

    //    e1.name = Vishal

    //    e2.name = Amit

    function Employee(name) {

        this.name = name;

    }

    var e1 = new Employee("Vishal");

    e1.getName = function () {

        return this.name;

    }

    var e2 = new Employee("Amit");

    document.write("e1.name = " + e1.getName() + "<br/>");

    document.write("e2.name = " + e2.getName() + "<br/>");

    function Employee(name) {

        this.name = name;

    }

    Employee.getName = function () {

        return this.name;

    }

    var e1 = new Employee("Vishal");

    var e2 = new Employee("Amit");

    document.write("e1.name = " + e1.getName() + "<br/>");

    document.write("e2.name = " + e2.getName() + "<br/>");

    function Employee(name) {

        this.name = name;

    }

    Employee.prototype.getName = function () {

        return this.name;

    }

    var e1 = new Employee("Vishal");

    var e2 = new Employee("Amit");

    document.write("e1.name = " + e1.getName() + "<br/>");

    document.write("e2.name = " + e2.getName() + "<br/>");

    //    Output:

    //    e1.name = Vishal

    //    e2.name = Amit

</script>

Global Namespace Pollution

When working with JavaScript on a big project, you might familiar with term ‘this code pollutes the global scope’ during the code review.

JavaScript does not support function overloading. Polluting global namespace causes name collision. This is especially true in large projects where you may be using several JavaScript libraries (both internally developed as well as third party libraries). That's why it is very important not to add everything to the global namespace. If someone else use the same variable or function names it can lead to name collision.