Introduction to Object Oriented JavaScript.

JavaScript is object-oriented to its core, with powerful, flexible OOP capabilities. This article starts with an introduction to object-oriented programming, then reviews the JavaScript object model, and finally demonstrates concepts of object-oriented programming in JavaScript.

JavaScript review

If you don't feel confident about JavaScript concepts such as variables, types, functions, and scope you can read about those topics in A re-introduction to JavaScript. You can also consult theJavaScript Guide.

Object-oriented programming

Object-oriented programming is a programming paradigm that uses abstraction to create models based on the real world. It uses several techniques from previously established paradigms, including modularity, polymorphism, and encapsulation. Today, many popular programming languages (such as Java, JavaScript, C#, C++, Python, PHP, Ruby and Objective-C) support object-oriented programming (OOP).
Object-oriented programming may be seen as the design of software using a collection of cooperating objects, as opposed to a traditional view in which a program may be seen as a collection of functions, or simply as a list of instructions to the computer. In OOP, each object is capable of receiving messages, processing data, and sending messages to other objects. Each object can be viewed as an independent little machine with a distinct role or responsibility.
Object-oriented programming is intended to promote greater flexibility and maintainability in programming, and is widely popular in large-scale software engineering. By virtue of its strong emphasis on modularity, object oriented code is intended to be simpler to develop and easier to understand later on, lending itself to more direct analysis, coding, and understanding of complex situations and procedures than less modular programming methods.1

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.
For a more extensive description of object-oriented programming, see Object-oriented programming at Wikipedia.

Prototype-based programming

Prototype-based programming is a style of object-oriented programming that doesn't make use of classes. Instead, behavior reuse (known as inheritance in class-based languages) is accomplished through a process of decorating (or expanding upon) existing objects which serve as prototypes. This model is also known as classless, prototype-oriented, or instance-based programming.
The original (and most canonical) example of a prototype-based language is the programming language Self developed by David Ungar and Randall Smith. However, the class-less programming style has recently grown increasingly popular, and has been adopted for programming languages such as JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (when using the Viewer framework to manipulate Morphic components), and several others.1

JavaScript object oriented programming

Namespace

A namespace is a container which allows developers to bundle up all functionality under a unique, application-specific name. In JavaScript a namespace is just another object containing methods, properties, and objects.
Note: It's important to note that in JavaScript, there's no language-level difference between regular objects and namespaces. This differs from many other object-oriented languages, and can be a point of confusion for new JavaScript programmers.
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, since each application's  objects are properties of an application-defined global object.
Let's create a global object called MYAPP:
// global namespace
var MYAPP = MYAPP || {};
In the above code sample, we have first checked whether MYAPP is already defined (either in same file or in another file). If yes, then use the existing MYAPP global object, otherwise create an empty object called MYAPP which will encapsulate method, functions, variables, and objects.
We can also create sub-namespaces:
// sub namespace
MYAPP.event = {};
Below is code syntax for creating a namespace and adding variables, functions, and a method:
// Create container called MYAPP.commonMethod for common method and properties
MYAPP.commonMethod = {
  regExForName: "", // define regex for name validation
  regExForPhone: "", // define regex for phone no validation
  validateName: function(name){
    // Do something with name, you can access regExForName variable
    // using "this.regExForName"
  },
 
  validatePhoneNo: function(phoneNo){
    // do something with phone number
  }
}

// Object together with the method declarations
MYAPP.event = {
    addListener: function(el, type, fn) {
    // code stuff
    },
    removeListener: function(el, type, fn) {
    // code stuff
    },
    getEvent: function(e) {
    // code stuff
    }
  
    // Can add another method and properties
}

// Syntax for Using addListener method:
MYAPP.event.addListener("yourel", "type", callback);

Standard built-in objects

JavaScript has several objects included in its core, for example, there are objects like Math, Object, Array, and String. The example below shows how to use the Math object to get a random number by using its random() method.
console.log(Math.random());
Note: This and all further examples presume a function named console.log() is defined globally. The console.log() function is not actually a part of the JavaScript language itself, but many browsers implement it to aid in debugging.
See JavaScript Reference: Standard built-in objects for a list of the core objects in JavaScript.
Every object in JavaScript is an instance of the object Object and therefore inherits all its properties and methods.

Custom objects

The class

JavaScript is a prototype-based language which contains no class statement, such as is found in C++ or Java. This is sometimes confusing for programmers accustomed to languages with a classstatement. Instead, JavaScript uses functions as classes. Defining a class is as easy as defining a function. In the example below we define a new class called Person.
var Person = function () {};

The object (class instance)

To create a new instance of an object obj we use the statement new obj, assigning the result (which is of type obj) to a variable to access it later. An alternative way to create a new instance is to use Object.create(). This will create an uninititalized instance.
In the example above we define a class named Person. In the example below we create two instances (person1 and person2).
var person1 = new Person();
var person2 = new Person();
Note: Please see Object.create() for a new, additional, instantiation method.

The constructor

The constructor is called at the moment of instantiation (the moment when the object instance is created). The constructor is a method of the class. In JavaScript the function serves as the constructor of the object, therefore there is no need to explicitly define a constructor method. Every action declared in the class gets executed at the time of instantiation.
The constructor is used to set the object's properties or to call methods to prepare the object for use. Adding class methods and their definitions occurs using a different syntax described later in this article.
In the example below, the constructor of the class Person logs a message when a Person is instantiated.
var Person = function () {
  console.log('instance created');
};

var person1 = new Person();
var person2 = new Person();

The property (object attribute)

Properties are variables contained in the class; every instance of the object has those properties. Properties are set in the constructor (function) of the class so that they are created on each instance.
Working with properties from within the class is done using the keyword this, which refers to the current object. Accessing (reading or writing) a property outside of the class is done with the syntax:InstanceName.Property; this is the same syntax used by C++, Java, and a number of other languages. (Inside the class the syntax this.Property is used to get or set the property's value.)
In the example below we define the firstName property for the Person class and we define it at instantiation.
var Person = function (firstName) {
  this.firstName = firstName;
  console.log('Person instantiated');
};

var person1 = new Person('Alice');
var person2 = new Person('Bob');

// Show the firstName properties of the objects
console.log('person1 is ' + person1.firstName); // logs "person1 is Alice"
console.log('person2 is ' + person2.firstName); // logs "person2 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. To define a method, assign a function to a named property of the class's prototype property; the name that the function is assigned to is the name that the method is called by on the object.
In the example below we define and use the method sayHello() for the Person class.
var Person = function (firstName) {
  this.firstName = firstName;
};

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

var person1 = new Person("Alice");
var person2 = new Person("Bob");

// call the Person sayHello method.
person1.sayHello(); // logs "Hello, I'm Alice"
person2.sayHello(); // logs "Hello, I'm Bob"
In JavaScript methods are regular function objects that are bound to an object as a property, which means they can be invoked "out of the context". Consider the following example code:
var Person = function (firstName) {
  this.firstName = firstName;
};

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

var person1 = new Person("Alice");
var person2 = new Person("Bob");
var helloFunction = person1.sayHello;

// logs "Hello, I'm Alice"
person1.sayHello();

// logs "Hello, I'm Bob"
person2.sayHello();

// logs "Hello, I'm undefined" (or fails
// with a TypeError in strict mode)
helloFunction();                                    

// logs true
console.log(helloFunction === person1.sayHello);

// logs true
console.log(helloFunction === Person.prototype.sayHello);

// logs "Hello, I'm Alice"
helloFunction.call(person1);
As that example shows, all of the references we have to the sayHello function — the one onperson1, on Person.prototype, in the helloFunction variable, etc. — refer to the same function. The value of this during a call to the function depends on how we call it. In the common case when we call it in an expression where we got the function from an object property —person1.sayHello() — this is set to the object we got the function from (person1), which is whyperson1.sayHello() uses the name "Alice" and person2.sayHello() uses the name "Bob". But if we call it other ways, this is set differently: Calling it from a variable — helloFunction() — setsthis to the global object (window, on browsers). Since that object (probably) doesn't have afirstName property, we end up with "Hello, I'm undefined". (That's in loose mode code; it would be different [an error] in strict mode, but to avoid confusion we won't go into detail here.) Or we can setthis explicitly using Function#call (or Function#apply), as shown at the end of the example.
Note: See more about this on Function#call and Function#apply

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. In modern browsers you can also useObject.create to implement inheritance.
Note: JavaScript does not detect the child class prototype.constructor (seeObject.prototype), so we must state that manually. See the question "Why is it necessary to set the prototype constructor?" on Stackoverflow.
In the example below, we define the class Student as a child class of Person. Then we redefine the sayHello() method and add the sayGoodBye() method.
// Define the Person constructor
var Person = function(firstName) {
  this.firstName = firstName;
};

// Add a couple of methods to Person.prototype
Person.prototype.walk = function(){
  console.log("I am walking!");
};

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

// Define the Student constructor
function Student(firstName, subject) {
  // Call the parent constructor, making sure (using Function#call)
  // that "this" is set correctly during the call
  Person.call(this, firstName);

  // Initialize our Student-specific properties
  this.subject = subject;
};

// Create a Student.prototype object that inherits from Person.prototype.
// Note: A common error here is to use "new Person()" to create the
// Student.prototype. That's incorrect for several reasons, not least 
// that we don't have anything to give Person for the "firstName" 
// argument. The correct place to call Person is above, where we call 
// it from Student.
Student.prototype = Object.create(Person.prototype); // See note below

// Set the "constructor" property to refer to Student
Student.prototype.constructor = Student;

// Replace the "sayHello" method
Student.prototype.sayHello = function(){
  console.log("Hello, I'm " + this.firstName + ". I'm studying "
              + this.subject + ".");
};

// Add a "sayGoodBye" method
Student.prototype.sayGoodBye = function(){
  console.log("Goodbye!");
};

// Example usage:
var student1 = new Student("Janet", "Applied Physics");
student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
student1.walk();       // "I am walking!"
student1.sayGoodBye(); // "Goodbye!"

// Check that instanceof works correctly
console.log(student1 instanceof Person);  // true 
console.log(student1 instanceof Student); // true
Regarding the Student.prototype = Object.create(Person.prototype); line: On older JavaScript engines without Object.create, one can either use a "polyfill" (aka "shim", see the linked article), or one can use a function that achieves the same result, such as:
function createObject(proto) {
    function ctor() { }
    ctor.prototype = proto;
    return new ctor();
}

// Usage:
Student.prototype = createObject(Person.prototype);
Note: See Object.create for more on what it does, and a shim for older engines.

Encapsulation

In the previous example, Student does not need to know how the Person class's walk() method is implemented, but still can use that method; the Student class doesn't need to explicitly define that method unless we want to change it. This is called encapsulation, by which every class packages data and methods into a single unit.
Information hiding is a common feature in other languages often as private and protected methods/properties. Even though you could simulate something like this on JavaScript, this is not a requirement to do Object Oriented programming.2

Abstraction

Abstraction is a mechanism that permits modeling the current part of the working problem. This can be achieved by inheritance (specialization), or composition. JavaScript achieves specialization by inheritance, and composition by letting instances of classes be the values of attributes of other objects.
The JavaScript Function class inherits from the Object class (this demonstrates specialization of the model) and the Function.prototype property is an instance of Object (this demonstrates composition).
var foo = function () {};

// logs "foo is a Function: true"
console.log('foo is a Function: ' + (foo instanceof Function));

// logs "foo.prototype is an Object: true"
console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));

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).

Notes

The techniques presented in this article to implement object-oriented programming are not the only ones that can be used in JavaScript, which is very flexible in terms of how object-oriented programming can be performed.
Similarly, the techniques shown here do not use any language hacks, nor do they mimic other languages' object theory implementations.
There are other techniques that make even more advanced object-oriented programming in JavaScript, but those are beyond the scope of this introductory article.

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

Comments

Post a Comment

Popular posts from this blog

How SQL Indexes Work internally ?

Image
When an index is created, it records the location of values in a table that are associated with the column that is indexed. Entries are added to the index when new data is added to the table. When a query is executed against the database and a condition is specified on a column in the WHERE clause that is indexed, the index is first searched for the values specified in the WHERE clause. If the value is found in the index, the index returns the exact location of the searched data in the table. Figure 16.1 illustrates how an index functions. Suppose the following query was issued: SELECT *  FROM TABLE_NAME WHERE NAME = 'SMITH'; As shown in Figure 16.1, the NAME index is referenced to resolve the location of all names equal to 'SMITH'. After the location is determined, the data can be quickly retrieved from the table. The data, in this case names, is alphabetized in the index. A full table scan would occur if there were no index on the table and the same que
Read more

UML,HLD and LLD.

UML is a standard language for specifying, visualizing, constructing, and documenting the artifacts of software systems. Here is a Complete understanding of UML.   http://www.tutorialspoint.com/uml/index.html High Level Design (HLD) is the overall system design - covering the system architecture and database design. It describes the relation between various modules and functions of the system. data flow, flow charts and data structures are covered under HLD. Low Level Design (LLD) is like detailing the HLD. It defines the actual logic for each and every component of the system. Class diagrams with all the methods and relation between classes comes under LLD. Programs specs are covered under LLD. In HLD, you design the component level abstractions and interactions. In LLD, for each component, you go to the lower level such as class and method levels, describe what each class's responsibility, its interface and its interaction with other classes. All terms like "high
Read more

Mutable and Immutable Objects

Mutable Objects:  When you have a reference to an instance of an object, the contents of that instance  can  be altered Immutable Objects:  When you have a reference to an instance of an object, the contents of that instance  cannot  be altered Immutability and Instances To demonstrate this behaviour, we'll use  java.lang.String  as the immutable class and  java.awt.Point  as the mutable class. Point myPoint = new Point( 0, 0 ); System.out.println( myPoint ); myPoint.setLocation( 1.0, 0.0 ); System.out.println( myPoint ); String myString = new String( "old String" ); System.out.println( myString ); myString.replaceAll( "old", "new" ); System.out.println( myString ); In case you can't see what the output is, here it is: java.awt.Point[0.0, 0.0] java.awt.Point[1.0, 0.0] old String old String We are only looking at a single instance of each object, but we can see that the contents of  myPoint  has changed, but the contents o
Read more