Introduction to Object Oriented Programming | JavaScript

My Guruji told me if you really want to do better in Siebel OpenUI, then you should learn Object Oriented Javascript.

Usually, whatever concept or methods in Javascript I need, just GOOGLE it and got the answer. But seriously thats not enough..!!!

In Siebel OpenUI, all vanilla JS files and any custom PM/PR files are purely based on Object Oriented javascript. So, its a crucial topic for all.

Everybody is aware about OOPs with famous languages like C++ and JAVA. It is a programming paradigm that uses abstraction to create models based on the real world.Object-oriented programming is intended to promote greater flexibility and maintainability in programming.

Terminology

Namespace

A container which allows developers to bundle all functionality under a unique, application-specific name.

Class

Defines the characteristics of the object. It is a template definition of variables and methods of an object.

Object

An Instance of a class.

Property

An object characteristic, such as color.

Method

An object capability, such as walk. It is a subroutine or function associated with a class.

Constructor

A method called at the moment of instantiation of an object. It usually has the same name as that of the class containing it.

Inheritance

A class can inherit characteristics from another class.

Encapsulation

A method of bundling the data and methods that use them together.

Abstraction

The conjunction of complex inheritance, methods, properties of an object must be able to simulate a reality model.

Polymorphism

Poly means “many”  and morphism means “forms“. Different classes might define the same method or property.

Prototype-based programming

Prototype-based programming is a style of object-oriented programming in which classes are not present. This model is also known as class-less, prototype-oriented, or instance-based programming.

Namespace

The idea behind creating a namespace in JavaScript is simple: one global object is created and all variables, methods and functions become properties of that object. Use of namespaces also minimizes the possibility of name conflicts in an application.

// global namespace
var MYVAR = MYVAR || {};

We can also create sub-namespaces:

// sub namespace
MYVAR.event = {};

The class

JavaScript is a prototype-based language which contains no class statement, such as is found in C++ or Java.  Instead, JavaScript uses functions as classes.

In the example below we define a new class called Amanda.

function Amanda() { }
or
var Amanda= function(){ }

The object (class instance)

In the example below we define a class named Amanda and we create two instances (amanda1 and amanda2).

function Amanda() { } var amanda1 = new Amanda(); var amanda2 = new Amanda();

The constructor

In JavaScript, the function serves as the constructor of the object therefore, there is no need to explicitly define a constructor method.

In the example below, the constructor of the class Amanda logs a message when a Amanda is instantiated.

function Amanda() {
console.log('Amanda instantiated');
}

var amanda1 = new Amanda();
var amanda2 = new Amanda();

The property (object attribute)

Properties are variables contained in the class; every instance of the object has those properties. Properties should be set in the prototype property of the class (function) so that inheritance works correctly.

In the example below we define the firstName property for the Amanda class and we define it at instantiation.

function Amanda(firstName) {
this.firstName = firstName;
console.log('Amanda instantiated');
}

var amanda1 = new Amanda('Alice');
var amanda2 = new Amanda('Bob');

// Show the firstName properties of the objects
console.log('amanda1 is ' + amanda1.firstName); // logs "amanda1 is Alice"
console.log('amanda2 is ' + amanda2.firstName); // logs "amanda2 is Bob"

The methods

Methods follow the same logic as properties; the difference is that they are functions and they are defined as functions. Calling a method is similar to accessing a property, but you add () at the end of the method name, possibly with arguments.

In the example below we define and use the method sayHello() for the Amanda class.

function Amanda(firstName) {
this.firstName = firstName;
}

Amanda.prototype.sayHello = function() {
console.log("Hello, I'm " + this.firstName);
};

var amanda1 = new Amanda("Alice");
var amanda2 = new Amanda("Bob");

// call the Amanda sayHello method.
amanda1.sayHello(); // logs "Hello, I'm Alice"
amanda2.sayHello(); // logs "Hello, I'm Bob"

Inheritance

Inheritance is a way to create a class as a specialized version of one or more classes (JavaScript only supports single inheritance). The specialized class is commonly called the child, and the other class is commonly called the parent. In JavaScript you do this by assigning an instance of the parent class to the child class, and then specializing it.

Encapsulation

by which every class inherits the methods of its parent and only needs to define things it wishes to change

Abstraction

Abstraction is a mechanism that permits modeling the current part of the working problem. This can be achieved by inheritance (specialization), or composition.

Polymorphism

Just like all methods and properties are defined inside the prototype property, different classes can define methods with the same name; methods are scoped to the class in which they’re defined. This is only true when the two classes do not hold a parent-child relation (when one does not inherit from the other in a chain of inheritance).

In my next post, I will try to relate all above concepts with a sample Pm/PR file, so just wait…

@AskmeSiebel