What are prototypes in JavaScript?

Question

What is a prototype for a JavaScript class? In other words, what is the difference between ``` Example.prototype.method {} ``` and ``` Example.method{} ``` when defining the Example class? Edit: For those interested, I found a great explanation (in addition to the answer below) here for the difference between class methods and constructor methods: http://idhana.com/2009/07/13/constructor-vs-class-methods-in-javascript/ Edit 2: The full answer! http://blog.anselmbradford.com/2009/04/09/object-oriented-javascript-tip-creating-static-methods-instance-methods/

Accepted Answer

The difference is in the latter example you're creating a static method, which is not inherited if `Example` is a constructor function. By defining properties in the `prototype` property of a constructor function and creating objects with the `new` keyword, the newly created objects inherit the prototype of the constructor and thus have access to those methods.

An example would be the methods defined in the built-in core constructors, such as `String`.. newly created strings have a `indexOf` method because there was one defined in the `String` function constructor's prototype

```
typeof String.prototype.indexOf // 'function'

var name = 'John';
alert( name.indexOf('J') ) // 0
```

The code below creates a function constructor, we first define a static method, create an object, find out the object does not have a getName method, then we define one in the prototype and find that now the object does have a getName method.

```
function Name(name) {
    this.name = name;
};
Name.getName = function(){};

var john = new Name();
typeof john.getName // undefined

var john = new Name();
Name.prototype.getName = function(){ alert( this.name )};
typeof john.getName

john.constructor.prototype.getName == john.getName // true
```

So to reiterate, inheritance in ECMAScript is achieved primarily by defining properties/methods in the prototype of a function constructor, example would be all the core constructors such as Date/Number/String which have methods defined in their respective prototype properties, which allows you to use those methods when you create an instance with the `new` keyword.

Remember that the newly created object has a `constructor` property which points to the constructor which made it, and we can access the `prototype` property directly. The `john` object we created does not directly own the `getName` method, since the interpreter cannot find it directly on the object it travels upwards to the constructor and finds it in its prototype.

And btw, we didn't really have to create a new instance of the `john` object, as pointed in the other answer you can define properties in the prototype after you create the initial constructor, and all objects would inherit those prototypal properties even after they've been created.

A static method cannot rely on context, can't rely on a specific instance of a class, can't rely on the `this` keyword therefore this would not be a static method:

```
function Name(name) {
    this.name = name;
    this.getName = function() { return this.name; }
};
```

This would be an example of a static method:

```
Name.getName = function() {};
```

but there's absolutely no sense in making `getName` static because as the name implies it must rely on an object instance to determine what the name property is, you should have more generic helper functions like parsing functions such as `Date.parse` as static methods and define instance methods in the prototype as they're more efficient than defining `this.foo = function(){}` in the constructor.

What are prototypes in JavaScript?

Solution

Problem