Setting function prototype to a new object

Question

I've been seeing this pattern in code recently:

 function Person(){
    this.name = "Dan";
}

Person.prototype = {
    whatAmI: function(){
        alert("I am a person")
    }
}

On the above object person object, you can only reference the function whatAmI by calling Person.prototype.whatAmI() instead of Person.whatAmI() .

Is there any particular reason that this is done? Tt seems like its becoming popular and I cant see the benifit other than having methonds hidden on the prototype object instead of the Person object.

I understand the basics prototypes in Javascript, and I understand that using Person.prototype.whatAmI is a little unconventional in code instaed of just calling new Person(). However, I'm talking about places where the Person object is returned from another function call, and used as a normal object. Thus, the only way to call whatAmI is via Person.prototype.whatAmI

Answer 1

The purpose of the prototype property on functions is that it determines what prototype is assigned to objects created via the new expression when it's used with that function, e.g.:

var p = new Person();

Now, p's underlying prototype is the object that Person.prototype referred to when the new expression was evaluated, so:

p.whoAmI();

works.

In general, replacing the object on the prototype property isn't a great idea and you should only do it when setting up inheritance hierarchies. Instead, just add to the existing object:

function Person(){
    this.name = "Dan";
}

Person.prototype.whoAmI = function(){
    alert("I am a person")
};

---

A bit tangential, but:

You do have to replace the object, though, when setting up hierarchies.

// Base
function Person(name) {
    this.name = name;
}
Person.prototype.whoAmI = function() {
    alert("I am " + this.name);
};

// Derived
function Employee(name, position) {
    Person.call(this, name);
    this.position = position;
}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

// Augmenting the derived prototype
Employee.prototype.whatDoIDo = function() {
    alert("I hold the position " + this.position);
};

(That's not meant to be the be-all, end-all of hierarchies, just a quick example.)

Answer 2

whatmI is meant to be called on Person instances, e.g.:

var bob = new Person();
bob.whatAmI();

The prototype property of a constructor has properties that are accessible to all constructed instances of that constructor.

The ECMAScript 5 specification has a pleasantly readable explanation of the language's prototype-based inheritance:

Each constructor is a function that has a property named “prototype” that is used to implement prototype-based inheritance and shared properties. Objects are created by using constructors in new expressions; for example, new Date(2009,11) creates a new Date object...

Every object created by a constructor has an implicit reference (called the object’s prototype) to the value of its constructor’s “prototype” property. Furthermore, a prototype may have a non-null implicit reference to its prototype, and so on; this is called the prototype chain. When a reference is made to a property in an object, that reference is to the property of that name in the first object in the prototype chain that contains a property of that name. In other words, first the object mentioned directly is examined for such a property; if that object contains the named property, that is the property to which the reference refers; if that object does not contain the named property, the prototype for that object is examined next; and so on.

Answer 3

Prototype is actually a built in way in JavaScript for accomplishing inheritance. An object that has already been defined can have methods and properties added to it by accessing it's prototype.

Go right to the authority on the subject and read up. This topic in particular is what makes JavaScript cool.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

Answer 4

There is no specific reason. It depends on what you want.

If the whatAmI function is needed on instances of the type Person, then you define it on the protoype. If you want it on the type, you can do,

Person.whatAmI = function(){
    alert("I am a person")
}

They are both valid uses of the language. What you do depends on your application.