Object Vs Prototype in JS

Its a pretty hard thing to wrap your mind around if you are used to the ease of extending objects in other OOP languages, but i'll do my best to explain the uses of those and what is what. I am going to assume you are familiar with other OOP languages. Correct me if i'm wrong.

All functions have the prototype Function(). They are inheriting all base functionlity from Function like toString() and valueOf().

Then there is a constructor. That is what you use to initialise an object with.

p = new Foo();

So in this case we have two things.

• A function Foo with Function as prototype(Foo)
• A Function object with Foo() as constructor(p)

(following me yet?)

The Foo() constructor can override some base functionality of theFunction constructor, but also leave it as it is and make good use of it.

If you are familiar with OOP priciples, The prototype is the base class, the constructor your current class. in OOP the above would be class Foo extends Function

You can also start inheritance with this entire setup of prototype and constructor making more complex objects as you go whilst sharing functionality.

For example this:

// make a object initialiser extending Function. in oop `class Foo extends Function`

function Foo(bar) {
    this.baz = bar;
}
Foo.prototype.append = function(what) {
    this.baz += " " + what;
};
Foo.prototype.get() {
    return this.baz
}

Now lets say we want different ways to get baz out of there. one for console logging and one for putting it on the title bar. We could make a big thign about our class Foo, but we dont do that, because we need to do wholly different things with the new classes but are made for different implementations. The only thing they need to share are the baz item and the setters and getters.

So we need to extend it to use an OOP term. in OOp this would be the desired end result class Title extends Foo(){}. So lets take a look how to get there.

function Title(what) {
    this.messsage = what;
}

At this point the Title function looks like this:

• prototype Function
• constructor Title

So, to make it extends Foo we need to change the prototype.

Title.prototype = new Foo();

• prototype Foo
• constructor Foo

This is done by initialising a new Foo() object against the prototype. Now its basically a Foo object called Title. That is not what we want because now we cant access the message part in Title. We can make it properly extend Foo() by resetting the constructor to Title

Title.prototype.constructor = Title;

• prototype Foo
• Constructor Title

Now we are faced with one more problem. The constructor of Foo doesnt get initialised so we end up with an undefined this.baz

To resolve that we need to call the parent. In java you would do that with super(vars), in php$parent->__construct($vars).

In javascript we have to modify the Title class constructor to call the constructor of the parent object.

So the Title class constructor would become

function Title(what) {
    Foo.call(this,what);
    this.messsage = what;
}

By using the Function object property Foo inherited we can initialise the Foo object in the Title object.

And now you have a properly inherited object.

So instead of using a keyword likeextend like other OOP languages it uses prototype and constructor.