What is Object Oriented Programming (OOP)?

A way of representing things as collections of code with data and actions, including mechanisms for reusing code among related collections.

OOP Secondary Concepts

• Public, private, & protected
• Static members
• Interfaces
• Abstracts

OOP Secondary Concepts

• Public, private, & protected privileged
• Static members
• Interfaces Mixins
• Abstracts

Even our functions are objects!

function foo() {
    return "bar";
}

/* Get the name and content of our function */

console.log(foo.name);       /*  "foo"  */

console.log(foo.toString()); /*  "function foo() { return \"bar\" }"  */

FYI, while undefined is clearly not an object,
null is: typeof null === "object"

Simple Objects

var literalDog = {
    name: "Vincent",
    speak: function() {
        return this.name + " says woof";
    }
};

var literalDog = new Object();
literalDog.name = "Vincent";
literalDog.speak = function() {
    return this.name + " says woof";
};

Calling object methods

var literalDog = {
    name: "Vincent",
    speak: function() {
        return this.name + " says woof";
    }
};

literalDog.speak();  /* "Vincent says woof" */

this inside an object method refers to the current context.

Context is typically the variable before the "." when called:
this === literalDog inside speak()

Why not use object literals?

• Limited reusability
• More difficult for inheritance
• Verbose
• Poor abstraction

A Dog by any other name...

function Dog(name) {
    if (name) { this.name = name; }
    
    this.speak = function() {
        return this.name + " says woof";
    };
}

var v = new Dog("Vincent");
v.speak();   /* "Vincent says woof" */

var b = new Dog("Brian");
b.speak();   /* "Brian says woof" */

What have we created?

function Dog(name) { /* ... */ }

console.log(Dog.prototype);

{
    constructor: function Dog(name) {
        if (name) { this.name = name; }
        
        this.speak = function() {
            return this.name + " says woof";
        };
    },
    __proto__: Object { /* ... */ }
}

The "new" keyword

var v = new Dog("Vincent");

The "new" keyword

In fact, we can do these actions on our own:

var v = Object.create(Dog.prototype);

v.constructor("Vincent");

v.speak();   /* "Vincent says woof" */

Note that Object.create() does not exist in IE < 9, but you can use a shim.

A better Dog

What about name and speaknot being on the prototype?
We probably want them to be...

function Dog(name) {
    if (name) { this.name = name; }
}

Dog.prototype.name = "Bubbles";
Dog.prototype.speak = function() {
    return this.name + " says woof";
};

var b = new Dog();  /* no name passed in! */

b.speak();          /* "Bubbles says woof" */

A prototypical Dog

console.log(Dog.prototype);
 
{
    constructor: function Dog(name) {
        if (name) { this.name = name; }
    },
    name: "Bubbles",
    speak: function() {
        return this.name + " says woof";
    },
    __proto__: Object { /* ... */ }
}

Dun dun dun...

(That's pronounced "dunder proto", as in: "double underscore proto")

var v = new Dog("Vincent");

v.__proto__ === Dog.prototype;  /* true */

Object.getPrototypeOf( v ) === Dog.prototype  /* true */

Dunder proto no more

__proto__ has existed for a long time, and in ES6/ES2015 it is deprecated

Public Members

Anything attached to the prototype:

Dog.prototype.name = "Bubbles";                  /* public! */
Dog.prototype.speak = function() { /* ... */ };  /* public! */

Public Members

Anything on this or a reference to the object instance:

function Dog(name) {
    if (name) { this.name = name; }

    this.fur = "black";  /* public! */
}

var v = new Dog("Vincent");

v.human = "Jordan";  /* public! */

Private Variables

And privileged methods

Private Variables

Variables declared inside a function block only exist while that function's execution context exists.

function Dog(name) {
    if (name) { this.name = name; }

    /* notice that we don't use: this.alive */
    var alive = true;  /* private */
}

var v = new Dog("Vincent");

v.alive;  /* undefined */

Priveleged Methods

If we want access to a private variable we have to create a "privileged" method...

function Dog(name) {
    if (name) { this.name = name; }

    /* notice that we don't use: this.alive */
    var alive = true;  /* private */

    this.isAlive = function() { return alive; };  /* privileged */
    this.die = function() { alive = false; };     /* privileged */
}

Access to the alive variable from isAlive() and die() is possible because functions in JavaScript are closures.

Closures

Closures

Closures

Closures

Closures

Closures

Closures

Priveleged Methods

If we want access to a private variable we have to create a "privileged" method...

function Dog(name) {
    if (name) { this.name = name; }

    /* notice that we don't use: this.alive */
    var alive = true;  /* private */

    this.isAlive = function() { return alive; };  /* privileged */
    this.die = function() { alive = false; };     /* privileged */
}

Priveleged Methods

function Dog(name) {
    if (name) { this.name = name; }

    /* notice that we don't use: this.alive */
    var alive = true;  /* private */

    this.isAlive = function() { return alive; };  /* privileged */
    this.die = function() { alive = false; };     /* privileged */
}

var v = new Dog("Vincent");

v.isAlive();  /* true */
v.die();      /* sets private "alive" var to false */
v.isAlive();  /* false */

v.alive;  /* undefined */

Priveleged Methods

function Dog(name) {
    if (name) { this.name = name; }

    /* notice that we don't use: this.alive */
    var alive = true;  /* private */

    this.isAlive = function() { return alive; };  /* privileged */
    this.die = function() { alive = false; };     /* privileged */
}

Dog.prototype.kill = function() { this.alive = false; };  /* NOT privileged */

var v = new Dog("Vincent");

v.kill();     /* sets this.alive to false */
v.isAlive();  /* true */

Inheritance

function Animal() {
    var alive = true;
    
    this.isAlive = function() { return alive; };
    this.die = function() { alive = false; };
}

function Dog(name) {
    /* call to parent constructor */
    Animal.apply(this);

    if (name) { this.name = name; }
}

Dog.prototype = Object.create(Animal.prototype); /* the magic happens */
Dog.prototype.constructor = Dog;                 /* on these two lines */


Dog.prototype.name = "Bubbles";                  /* public! */
Dog.prototype.speak = function() { /* ... */ };  /* public! */

Our New Chain

var v = new Dog("Vincent");
console.log(v);

{
    name: "Vincent",
    __proto__: Dog {
        constructor: function Dog(name) { /* ... */ },
        name: "Bubbles",
        speak: function () { /* ... */ },
        __proto__: Animal {
            constructor: function Animal() { /* ... */ },
            __proto__: Object { /* ... */ }
        }
    }
}

Our New Chain

Checking instances

var v = new Dog("Vincent");
(v instanceof Dog);     /* true */
(v instanceof Animal);  /* true */
(v instanceof Object);  /* true */

Dog.prototype.isPrototypeOf( v ); /* true */

Polymorphism
and Parent Methods

Parent Method Declaration

function Animal(age) {
    if (age) { this.age = age; }

    /* ... */
}

Animal.prototype.age = 1;
Animal.prototype.getAge = function() { return this.age; };

function Dog(name, age) {
    Animal.apply(this, [age]);

    /* ... */
}

Parent Method Declaration

function Animal(age) {
    if (age) { this.age = age; }

    /* ... */
}

Animal.prototype.age = 1;
Animal.prototype.getAge = function() { return this.age; };

Dog.prototype.getAge = function() {
    /* call the parent method first */
    var age = Animal.prototype.getAge.apply(this);
    
    return (age * 7);
};

var v = new Dog("Vincent", 11);
v.getAge(); /* 77 */

Define the Mixin

var Domesticated = {
    
    happiness: 1,
    
    lickFace: function(count) {
        this.happiness += count;
    }
    
};

Mixing it in

We need to copy our properties and methods
from the mixin to the desired prototype...

Use a helper method!!

Mixing it in - Use a helper method!

// jQuery ($), Underscore (_), or Angular (ng)
$.extend(target, obj1, obj2, /* ... */ );

// Prototype.js
Object.extend(target, obj);

// Backbone
Model.extend({ /* ... */ });

// Node
util.inherits(target, obj);

// Dojo
lang.extend(Class, obj);

Mix it in

function Animal(age) { /* ... */ }
function Dog(name, age) { /* ... */ }

var Domesticated = {
    happiness: 1,
    lickFace: function(count) {
        this.happiness += count;
    }
};

$.extend(Dog.prototype, Domesticated);

Using the Mixin

var v = new Dog("Vincent", 10);

console.log( v.happiness );  // 1

v.lickFace( 5 );

console.log( v.happiness );  // 6

ES6/ES2015 Classes

class Dog extends Animal {
    constructor(name, age) {
    
        super(age); /* Call parent method of same name */
    
        if (name) { this.name = name; }
    }

    /* Note the shorthand function definition */
    speak() { return this.name + " says woof"; }
    
    getAge() { return (super() * 7); }


    /* Getters & Setters are actually in ES5! */
    get name() { return this._name; }

    set name(value) { this._name = value; }
}

/* for data members, we still have to do this... */
Dog.prototype._name = "Bubbles";

ES6/ES2015 Classes

This looks nice, but it's just syntactic sugar!

In my opinion, this will just lead to more confusion...

Don't write a framework!