OOP in JavaScript

Object Oriented Programming in JavaScript

There are no classes in JavaScript. Functions can be used to somewhat simulate classes.
We can define instance properties, instance methods, and class properties, class methods, we can also use prototype to define inheritance.
In JavaScript, it's important to understand concept of execution context, search order, prototype.
Creating Objects
The simplest way to create a custom object is to create a new instance of Object and add properties and methods to it:
var person = new Object();
person.name = "Nicholas";
person.sayName = function(){ alert(this.name); };
The downside to this approach is that creating multiple objects with the same interface requires a lot of code duplication.
The Constructor Pattern
function Person(name, age, job){
    this.name = name; …
    this.sayName = function(){ alert(this.name);};   
}
Problems with Constructors
The major downside to constructors is that methods are created once for each instance and those instances' methods are not the same instance of Function.
The Prototype Pattern
The benefit of using the prototype is that all of its properties and methods are shared among object instances.
function Person(){}
Person.prototype.name = "Nicholas";
Person.prototype.sayName = function(){ alert(this.name); };
Alternate Prototype Syntax
Instead of adding to the prototype object, another way to achieve the above result is to overwrite the prototype completely.
Person.prototype = {
    constructor: Person,
    name : "Nicholas", …
    sayName : function () { alert(this.name); }
};
Problems with Prototypes
Prototype negates the ability to pass initialization arguments into the constructor. All properties on the prototype are shared among instances, this is ideal for functions, but problem occurs when a property contains a reference value.
Combination Constructor/Prototype Pattern
The most common way of defining custom types is to combine the constructor and prototype patterns. The constructor pattern defines instance properties, whereas the prototype pattern defines methods and shared property.
function Person(name, age, job){ this.name = name; }
Person.prototype = {
    constructor: Person,
    sayName : function () { alert(this.name); }
};
We can also enhance built-in objects, such as arrays or strings
Inheritance
Prototype Chaining
The basic idea is to use the concept of prototypes to inherit properties and methods between two reference types.
function SuperType(){}
function SubType(){}
SubType.prototype = new SuperType();//inherit from SuperType
SubType.prototype.getSubValue = function (){}; //new method
SubType.prototype.getSuperValue = function (){};  //override existing method
Problems with Prototype Chaining
The major issue revolves around prototypes that contain reference values. When implementing inheritance using prototypes, the prototype actually becomes an instance of another type, meaning that what once were instance properties are now prototype properties.
A second issue with prototype chaining is that you cannot pass arguments into the supertype constructor when the subtype instance is being created.
Constructor Stealing
The basic idea is quite simple: call the supertype constructor from within the subtype constructor.
function SuperType(name){ this.name = name;}
function SubType(){     
SuperType.call(this, “Nicholas”);
this.age = 29; //instance property
}
By using the call () method (or alternately, apply ()), the SuperType constructor is called in the context of the newly created instance of SubType. Doing this effectively runs all of the object-initialization code in the SuperType() function on the new SubType object. The result is that each instance has its own copy of the colors property.
Problems with Constructor Stealing
The downside to using constructor stealing is that:  methods must be defined inside the constructor, so there’s no function reuse.
Combination Prototype Chaining and Constructor Stealing
The basic idea is to use prototype chaining to inherit properties and methods on the prototype, and to use constructor stealing to inherit instance properties. This allows function reuse by defining methods on the prototype and allows each instance to have its own properties.
function SuperType(name){ this.name = name; }
function SubType(name, age){ 
    SuperType.call(this, name); //inherit properties
    this.age = age;
}
SubType.prototype = new SuperType();//inherit methods
SubType.prototype.sayAge = function(){};
Problems with Combination Inheritance
The most inefficient part of the pattern is that the supertype constructor is always called twice: once to create the subtype’s prototype, and once inside the subtype constructor.
Browser Object Model
The Browser Object Model (BOM) provides objects that expose browser functionality independent of any web page content, and provides objects, such as window, location, navigator, screen, and history.
Document Object Model
The DOM represents a document as a hierarchical tree of nodes, allowing        developers to add, remove, and modify individual parts of the page.

Resources:
Post a Comment

Labels

Java (159) Lucene-Solr (110) Interview (61) All (58) J2SE (53) Algorithm (45) Soft Skills (36) Eclipse (34) Code Example (31) Linux (24) JavaScript (23) Spring (22) Windows (22) Web Development (20) Nutch2 (18) Tools (18) Bugs (17) Debug (16) Defects (14) Text Mining (14) J2EE (13) Network (13) Troubleshooting (12) PowerShell (11) Chrome (9) Design (9) How to (9) Learning code (9) Performance (9) UIMA (9) html (9) Http Client (8) Maven (8) Problem Solving (8) Security (8) bat (8) blogger (8) Big Data (7) Continuous Integration (7) Google (7) Guava (7) JSON (7) ANT (6) Coding Skills (6) Database (6) Scala (6) Shell (6) css (6) Algorithm Series (5) Cache (5) Dynamic Languages (5) IDE (5) Lesson Learned (5) Programmer Skills (5) Tips (5) adsense (5) xml (5) AIX (4) Code Quality (4) GAE (4) Git (4) Good Programming Practices (4) Jackson (4) Memory Usage (4) Miscs (4) OpenNLP (4) Project Managment (4) Spark (4) System Design (4) Testing (4) ads (4) regular-expression (4) Android (3) Apache Spark (3) Become a Better You (3) Concurrency (3) Eclipse RCP (3) English (3) Happy Hacking (3) IBM (3) J2SE Knowledge Series (3) JAX-RS (3) Jetty (3) Restful Web Service (3) Script (3) regex (3) seo (3) .Net (2) Android Studio (2) Apache (2) Apache Procrun (2) Architecture (2) Batch (2) Bit Operation (2) Build (2) Building Scalable Web Sites (2) C# (2) C/C++ (2) CSV (2) Career (2) Cassandra (2) Distributed (2) Fiddler (2) Firefox (2) Google Drive (2) Gson (2) How to Interview (2) Html Parser (2) Http (2) Image Tools (2) JQuery (2) Jersey (2) LDAP (2) Life (2) Logging (2) Python (2) Software Issues (2) Storage (2) Text Search (2) xml parser (2) AOP (1) Application Design (1) AspectJ (1) Chrome DevTools (1) Cloud (1) Codility (1) Data Mining (1) Data Structure (1) ExceptionUtils (1) Exif (1) Feature Request (1) FindBugs (1) Greasemonkey (1) HTML5 (1) Httpd (1) I18N (1) IBM Java Thread Dump Analyzer (1) JDK Source Code (1) JDK8 (1) JMX (1) Lazy Developer (1) Mac (1) Machine Learning (1) Mobile (1) My Plan for 2010 (1) Netbeans (1) Notes (1) Operating System (1) Perl (1) Problems (1) Product Architecture (1) Programming Life (1) Quality (1) Redhat (1) Redis (1) Review (1) RxJava (1) Solutions logs (1) Team Management (1) Thread Dump Analyzer (1) Visualization (1) boilerpipe (1) htm (1) ongoing (1) procrun (1) rss (1)

Popular Posts