Scribd
Upload
59 views

Object Oriented Javascript

Object Oriented JavaScript uses constructor functions and prototype objects to emulate classes. [1] Constructors initialize objects with the new keyword and this refers to the new object. [2] All objects inherit properties from their prototype, allowing for decreased memory usage and shared changes. [3] Inheritance is established by setting an object's prototype to a "superclass" prototype, and methods can call super() to reuse parent implementations.

Uploaded by

Andrei Ursuleanu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
59 views

Object Oriented Javascript

Object Oriented JavaScript uses constructor functions and prototype objects to emulate classes. [1] Constructors initialize objects with the new keyword and this refers to the new object. [2] All objects inherit properties from their prototype, allowing for decreased memory usage and shared changes. [3] Inheritance is established by setting an object's prototype to a "superclass" prototype, and methods can call super() to reuse parent implementations.

Uploaded by

Andrei Ursuleanu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 10

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

You might also like