Confusing Javascript prototype behavior

Question

I have the following Javascript code;

var Person = function(name, age) {
    this.name = name;
    this.age = age;
    return this;
};

Person.prototype.getAge = function() {
    alert("Age : " + this.age);
}

var p1 = new Person("xyz",10);
p1.getAge();

This works perfectly and I get the alert as Age : 10

Now if I update the code as below (defined getAge() after instantiating Person object p1);

var Person = function(name, age) {
    this.name = name;
    this.age = age;
    return this;
};

var p1 = new Person("xyz",10);

Person.prototype.getAge = function() {
    alert("Age : " + this.age);
}

p1.getAge();

It still returns me the output as "Age : 10"

Now my question is how does this work correctly, since Person.prototype.getAge was defined after we have instantiated Person object p1 ? Is it because of the way "prototype" works ?

Roger · Accepted Answer · 2013-02-26 14:08:57Z

1

Objects in javascript have a sort of a chain where if you ask them for a property, they will return theirs and if they don't have it, it'll try to find it above its chain, in your case, when p1 is asked for its getAge property, it looks for it in Person.prototype.

var Person = function(name, age) {
    this.name = name;
    this.age = age;
    return this;
};

var p1 = new Person("xyz", 10);
var p2 = new Person("abc", 12);

Person.prototype.getAge = function() {
    alert("Age : " + this.age);
}
p1.getAge = function() {
    alert("I am " + this.age + " years old.");
}

p1.getAge(); // I am 10 years old.
p2.getAge(); // Age : 12

In this example, p1 has its own getAge property, so when asked, it returns it. On the other hand, p2 doesnt really have this property but can access it via "that chain" and returns the property of its prototype.

edited Feb 26, 2013 at 14:08

answered Feb 26, 2013 at 13:35

Roger

2,9624 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel A. White · Accepted Answer · 2013-02-26 13:32:51Z

1

Yes that is the way prototype works. You can use this technique to extend strings, objects and arrays too.

answered Feb 26, 2013 at 13:32

Daniel A. White

192k49 gold badges389 silver badges474 bronze badges

Comments

BLSully · Accepted Answer · 2013-02-26 13:35:20Z

1

Any object prototype can be modified at any time. Think about the libraries/frameworks that modify the base Object prototype...even the built in objects (Date, String, etc) will all have the modifications done to Object.prototype whether or not they happen immediately at page load

try this:

Object.prototype.myTest = function() { console.log('hi'); }
var a = new Date()
a.myTest(); //hi

answered Feb 26, 2013 at 13:35

BLSully

5,9291 gold badge29 silver badges46 bronze badges

3 Comments

MaxArt Over a year ago

I was about to upvote, but please first don't extend Object.prototype, which is totally not recommended, unless you really really really know what you're doing...

Phrogz Over a year ago

@MaxArt I might modify that to say, "Don't extend Object.prototype with an enumerable property unless you really mean it. Usually custom methods should not be enumerable, and so should be defined using Object.defineProperty()."

BLSully Over a year ago

@MaxArt: I'm not recommending that extending Object.prototype is a good idea, merely as an example for the OP demonstrating that the prototype may be modified at any time

Collectives™ on Stack Overflow

Confusing Javascript prototype behavior

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related