Object Oriented JavaScript
Premises: Scope and Bindings
Functions have lexical scoping
Methods are owned by the objects they're assigned to this refers to function's owner
Copying / assigning a function to an object changes this apply/call apply the function as the method of the object passed as first argument this is passed as first argument BIND: objects and bound methods / cooks and their cookbooks JavaScript pseudo-classes: Constructor functions and Prototype objects
Constructors
Any function used with the new keyword
Should have an intuitive name (Array vs. init_array)
Can initialize object's properties before they are used, using this keyword
Parameters used for passing values needed for initialization
Typically don't have return values If constructor has a return value, that becomes the value of the new expression and the initialized object is discarded
Prototypes
All constructors have a prototype property prototype has a property named constructor
All objects inherit properties from their prototype
All objects (with the same constructor) share the same instance of their prototype
Inherited properties are not copied to the new object, they are references to the prototype properties => decreased memory usage + changes reflected in all instances Distinguish inherited properties with .hasOwnProperty() method Writing to an inherited property creates a local copy
Inheritance and Look-up
Extending built-in prototypes
String.prototype.trim = function () {
return this.replace(/(^\s+)|(\s+$)/,'');
};
Array.prototype.map
Useful for cross-browser compatibility Do NOT add properties to Object.prototype window, document and other host objects do not have prototype and nor can be extended
Comparison with Classes
Constructor
Instance properties and methods
function Circle(x, y, r) { this.x=x; this.y=y; this.r=r; }
Circle.prototype.getArea = function () { return Math.PI*this.r*this.r };
this is not implicitly included in the scope Class properties and methods Private properties / data encapsulation using closures
this.getRadius = function () { return r; };
Circle.max = function (c1, c2) { return c1.r>c2.r?c1:c2; };
function Circle(r) { }
Superclasses and Subclasses
prototype itself is an object, constructed with new Object()
CustomString.prototype = new String();
CustomString.prototype.constructor = CustomString;
Chaining constructors / calling super()
function CustomString (v) { String.call(this, v); } CustomString.prototype.superclass = String; function CustomString (v) { this.superclass(v); }
Overridden methods
CustomString.toString = function () { custom: + this.superclass.toString.apply(this); };
instanceof recognizes all superclasses
Extention Utilities
Subclasses can borrow properties from superclasses by copying them from one prototype to another Mixins: collections of generic properties to be borrowed instanceof, constructor, Object.prototype.toString and duck typing Building a framework with utilities to declare, inherit, extend pseudo-classes
Prevent definitions clashes by defining modules and namespaces Namespaces generally defined as objects
for (var p in protoA) { protoB[p] = protoA[p]; }
Recap
Constructor
Prototype
Inheritance
Homework: create and use 3 classes that inherit / extend in a chain
