Javascript OOP

Creating Objects and Inheritance

Creating Objects

var obj = {
    hello: 'world',
    id: 1234
};

var obj = new Object();
obj.hello = 'world';
obj.id = 1234;

var obj = Object.create(null, {
    hello: { value: "world" },
    id: { value: 1234 }
});

What about custom objects?

var carInstance = {
    drive: function(direction) { ... },
    stop: function() { ... }
    speed: 65
    mileage: 80000
};

Functional/Module Pattern

function Car() {
    var wearAndTear = 0;
    function startEngine() {
        ...
    }

    function turn() {
        ..
    }

    return  {
        drive: function(direction) { ... }
        stop: function() { ...},
        speed: 0,
        mileage: 0
    }
}

Create an instance with

var carInstance = Car();

Advantages

• True private variables and functions
• Easy to write and use
• No need to write new

Disadvantages

• Heavy on older browsers ( New functions for each instance )
• Cannot use instanceof or isPrototypeOf
• Limited to mixins for inheritance

Constructor Pattern

function Car() {
    var wearAndTear = 0;
    function startEngine() {
        ...
    }

    function turn() {
        ..
    }

    this.drive = function(direction) { ... };
    this.stop =  function() { ...};
    this.speed = 0;
    this.mileage = 0;
}

Create an instance with

var carInstance =  new Car();

Advantages

• True private variables and functions
• Easy to write and use
• Can use standard javascript inheritance and mixins

Disadvantages

• Heavy on older browsers ( New functions for each instance )

Prototype Pattern

What is a prototype?

A function’s prototype is the object instance that will become the prototype for all objects created using this function as a constructor.

It's just a normal Object

// *** function Object() {} ***

Object.prototype --> {} .prototype --> null

// What about var obj = new Object()?

obj.prototype    --> {} .prototype --> null

// What about function Array(length) {} ?
                                (Same as Object.prototype)
Array.prototype  --> {} .prototype --> {} .prototype  --> null

Prototype Pattern

var Car = (function() {
    function Car() {
        this.speed = 0;
        this.mileage = 0;

        // Pseudo private variable
        this._wearAndTear = 0;

    }
    function startEngine() {
        ...
    }

    function turn() {
        ..
    }
    Car.prototype.drive = function(direction) { ... };
    Car.prototype.stop = function() { ...};
    Car.prototype.speed = 0;
    Car.prototype.mileage = 0;
})();

Create an instance with

var carInstance =  new Car();

Advantages

• Very fast and lightweight
• Can use standard javascript inheritance and mixins

Disadvantages

• No private variables (private functions are available)
• More difficult to write

Inheritance

Build upon what is already available

Single Inheritance

Prototype, Prototype, Prototype

Example

Our new car

function Truck() { }
// Common mistake
Truck.prototype = Car.prototype;

What's wrong?

Example

function Truck() { }
Truck.prototype = new Car();
Truck.prototype.openTailgate = function() { ... }
...

Make It Generic

function inherit(Parent, Child) {
    function Temp() { this.constructor = Child; }
    Temp.prototype = Parent.prototype;
    Child.prototype = new Temp();
}

Multiple inheritance

Mix it up

Mixin/Extend

What does it look like

// Also called extend
function mixin(obj, otherObj) {
    for (var key in otherObj) {
        obj[key] = otherObj[key];
    }
}

Example

// Broadcasts events (simple pub/sub)
function Broadcaster() {}
Broadcaster.prototype.listen = function(event, fn) { ... };
Broadcaster.prototype.broadcast = function(event, data) { ... };

function Car() {
    extend(this, new Broadcaster());
}
Car.prototype.drive = function(direction) {
    if(obstruction) {
        this.broadcast('error', { errorMsg: 'Obstruction!'});
    }
}