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:
