Prototyping in Javascript

Question

In prototypal languages object can basically clone each other.

So, lets say we have a constructor function:

Bla = function()
{
    this.a = 1;
}

I can create a new instance of that object like this: x = new Bla();. Now, x.a returns 1.

If I were to write Bla.prototype.b = 2, then x.b would return 2. But, why? If x "cloned" Bla, why can't I just say that Bla.b = 2, without referencing the Bla.prototype, and still get the same functionality? Does this have something to do with the this keyword?

Answer 1

ECMAScript (JavaScript) supports "prototype-based inheritance". This means there is no differentiation between "class" and "instance" in JS. Opposed to OOP in other languages, in JS a "class" and "instance" are basically the same thing:

When you define Bla, it is instanciated immediately (ready to use), but can also serve as a "prototype" to clone the initial(!) definition of the object Bla for another instance with the same properties and methods.

In ECMAScript, everything is an object, even the objects initial definition. In other OOP languages, you have a "class" for the definition part.

The prototype object is for the case when you want to extend the prototype of "Bla" (read: class "Bla") after the initial definition and add the new property / function to all current and future instances of Bla.

If you are confused now, i think this code example may help to spot the difference:

// when defining "Bla", the initial definition is copied into the "prototype"
var Bla = function()
{
    this.a = 1;
}
// we can either modify the "prototype" of "Bla"
Bla.prototype.b = 2;
// or we can modify the instance of "Bla"
Bla.c = 3;

// now lets experiment with this..

var x = new Bla();  // read: "clone the prototype of 'Bla' into variable 'x'"  
console.log(x.b);     // logs "2"  -- "b" was added to the prototype, available to all instances

console.log(x.c);     // undefined   -- "c" only exists in the instance "Bla"
console.log(Bla.c);   // logs "3"  -- "Bla" is an object, just like our new instance 'x'

// also note this:
Bla.a = 1337;
var y = new Bla();
console.log(y.a);     // logs "1"  -- because the "prototype" was cloned, 
                // opposed to the current state of object "Bla"
console.log(Bla.a);   // logs "1337" 

As you see in the last example, the concept of "prototype" is necessary to avoid cloning the current "state" of your object.

If it wouldn't be implemented this way, you would possibly end up with weird effects, because if the original object "Bla" was used / modified before you clone it, then the current state would be copied as well. That is why the language designers went for the prototype construct.

Always remember: "Bla" isn't a static definition, like "classes" are in other OOP languages.

---

The ECMAScript specification says about prototype:

A prototype is an object used to implement structure, state, and behaviour inheritance in ECMAScript. When a constructor creates an object, that object implicitly references the constructor's associated prototype for the purpose of resolving property references. The constructor's associated prototype can be referenced by the program expression constructor.prototype, and properties added to an object's prototype are shared, through inheritance, by all objects sharing the prototype.

Some JS frameworks like the equally named "prototype" make heavy use of this feature to extend the functionality of Javascripts built-in objects.

For example, it extends the native array object with the method forEach, to add this missing feature to JS:

Array.prototype.forEach = function each(iterator, context) {
  for (var i = 0, length = this.length >>> 0; i < length; i++) {
    if (i in this) iterator.call(context, this[i], i, this);
  }
}