CODEWITHSUNDEEP
javascriptprototype
Xun Yang
Xun Yang

Reputation: 4419

javascript two variables with same name co-exist in same object?

I'm trying my best to understand javascript. Here is a simple experiment in Chrome console which gets me very confused:

var foo=function(){this.p=1;}
foo.prototype.p=2;
var bar=new foo();
//foo{p:1,p:2} <- this is the output of Chrome console, from the last command above

The output of Chrome is what confuses me. It seems like bar is an object with 2 parameters, p:1 and p:2. Does this mean bar has 2 p??? What is the reasoning behind this?

Upvotes: 4

Views: 1721

Answers (5)

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70159

Chrome DevTools console's inline (non-extended) object representation currently does not display any difference between own properties and inherited prototype properties.

Now let's break what's going on into smaller steps.

new foo() creates a new object whose internal proto property points to foo.prototype. This means this object can access all properties defined in foo.prototype. It's called prototype chain.

Now when you set a property of the same name in the object, it "shadows" the prototype's property by the same name, turning the latter inaccessible through regular property access (see @loxxy's answer using Object.getPrototypeOf(obj) to access the shadowed prototype property).

Once you add a function to the object or its prototype, the console allows you to display the extended object representation, which does differ own properties from prototype properties. In the next example I've added a q method to the prototype to allow this behavior. The properties inherited from the prototype are shown inside the object's proto internal property:

enter image description here

If you just want to have the number of instanced objects in the constructor's prototype, you can use:

var foo = function() {
    Object.getPrototypeOf(this).p++;
}
foo.prototype.p = 0;

console.log(new foo()); //{p: 1}
console.log(new foo()); //{p: 2}

Or without the ES5 dependency:

var foo = function() {
    foo.prototype.p++;
}
foo.prototype.p = 0;

console.log(new foo()); //{p: 1}
console.log(new foo()); //{p: 2}

Upvotes: 2

loxxy
loxxy

Reputation: 13151

The bar object has only one p with value 1

The earlier p with value 2 can be viewed in a readonly object which you can access with getPrototypeOf:

Object.getPrototypeOf(bar).p

You see both because the developer toolbar is designed to print an XML representation of the specified object which should intuitively show all the properties, whether directly accessible or not.

Upvotes: 2

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123473

Yes. Sort of.

bar has both:

  • A p property of its own.

    bar.hasOwnProperty('p'); // true
bar.p;                   // 1

  • A p property still remaining on the prototype that it has through inheritance.

    Object.getPrototypeOf(bar).p; // 2

Though, only 1 of them is accessible directly from bar at a time, with preference to the own property.

bar.p;        // 1
delete bar.p;
bar.p;        // 2

And, Chrome is showing both because it's traversing the prototype chain and looking for any enumerable properties.

Upvotes: 2

GameAlchemist
GameAlchemist

Reputation: 19294

When you acces a property, the javascript engine will seek it on the object instance, then on all its prototype chain.
So the meaning of p as a prototype property is to have a default value for p, wether you define it on any instance of the class or not. One example might be the number of wheel for a vehicle, that could default to 4, for instance.
If later you write to this property :

 function Vehicle() {};
 Vehicle.protoype.wheelCount = 4;
 var myBike = new Vehicle();
 myBike.wheelCount = 2 ;           // this is a bike.

You won't change the value set on the prototype, but rather you'll create a new property on the instance, having the new value, so for instance :

 var myCar = new Vehicle();
 myCar.wheelCount // === 4

Now the very scenario you mention -setting a default value, and setting also an instance value in the constructor - doesn't make much sense, since you will have to use Object.getPrototypeOf to get to reach the default value. This is just a possibility that is of no use, just like there are many in all languages.

Upvotes: 1

karaxuna
karaxuna

Reputation: 26940

var foo=function(){this.p=1;} is constructor and executes after var bar=new foo();. So at the beginning p=2 and then p becomes 1. So:

var foo=function(){
   // here this.p is equal to 2
   this.p=1;
   // here this.p is equal to 1
}
foo.prototype.p=2;
var bar=new foo();

EDIT:

JSON.stringify(bar);

Upvotes: 1

Related Questions