Important Concepts in Javascript: Prototypes

Another common answer to my question on Quora about important javascript is Prototypes. I have been researching javascript prototypes for a few days now and I think I have come up with a pretty good summary. First lets start off with the wikipedia definition:

Prototype-based programming is a style of object-oriented programming in which classes are not present, and behavior reuse (known as inheritance in class-based languages) is performed via a process of cloning existing objects that serve as prototypes. This model can also be known as classless, prototype-oriented or instance-based programming. Delegation is the language feature that supports prototype-based programming.

Delegation

In the final sentence it says that Delegation is the language feature the supports prototypes. If there is no delegation there are no prototypes. So lets first understand what Delegation is from wikipedia

• Most commonly, it refers to a programming language feature making use of the method lookup rules for dispatching so-called self-calls as defined by Lieberman in his 1986 paper "Using Prototypical Objects to Implement Shared Behavior in Object-Oriented Systems". Delegation as a language feature supports the prototype-based programming model.
• In its original usage, delegation refers to one object relying upon another to provide a specified set of functionalities. In research, this is often referred to as consultation or as aggregation in modeling.

In short Delegation allows objects in a language to lookup methods that are undefined on its self in another object. In javascript this object is called a Prototype object. The rules that govern how this method lookup works is called the Prototype Chain. More on this later.

The .prototype Property

The .prototype property contains the Prototype object for any given object. To demonstrate the .prototype property consider the following code example:

As you can see the prototype is a normal object and when calling a method undefined on the original object it will try to look up the method on its prototype via Delegation.

The .__proto__ Property and Object.getPrototypeOf

Many newer browsers have the non standard property __proto___ and in the ECMAScript5 spec there is a new function on Object called getPrototypeOf. To see why these are useful take a look at this code:

Basically what happens here is when you create an object based on the Foo object constructor but then change Foo's prototype after instantiation it takes a snapshot of Foo's prototype at the time of object instantiation. __proto__ and Object.getPrototypeOf get the prototype object of the instance of the object when the object is instantiated. To change the internal Prototype of an object you must use __proto__ or getPrototypeOf.

The prototype chain

In javascript there a rules on how javascript performs a lookup for the methods on an object and its prototypes. This is called the prototype chain. Here is a code snippet to demonstrate how the prototype chain works.


As you can see this script demonstrates that first the method is looked up on the object itself, then on the objects constructors prototype and finally on the objects internal prototype.

Inheritance

Prototypes in javascript are useful because you can share prototypes (and their methods) between objects. Using prototypes in this manner is used to emulate inheritance like you would see in traditional class based programming languages. Here is an example of how you can use prototypes to emulate inheritance:
As you can see using the prototype allows us to share the eat method between the different types of Animals. An added benefit of using this is that all Animal instances will share the same eat method cutting down on memory usage.

Hopfully this has helped you gain a better understanding of how prototypes work and also how to implement prototypes in your code in an object oriented manner.