Javascript two variables with the same name coexist in the same object?

Question

I try to understand javascript. Here's a simple experiment in the Chrome console that really bothers me:

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 

Chrome's output is what confuses me. It seems that bar is an object with two parameters, p: 1 and p: 2. Does this mean that the bar has 2 p ??? What are the reasons for this?

Answer 1

Currently, the Chrome DevTools inline console object view (not extended) does not display the difference between native properties and inherited prototype properties.

Now undo what happens in smaller steps.

new foo() creates a new object, the internal proto property points to foo.prototype . This means that this object can access all the properties defined in foo.prototype . He called the prototype chain .

Now, when you set a property with the same name in the object, it “obscures” the prototype property with the same name, turning the latter inaccessible through regular access to the resource (see @loxxy answer using Object.getPrototypeOf(obj) for access to shaded prototype property).

After adding a function to an object or its prototype, the console allows you to display an extended representation of the object, which distinguishes its own properties from the properties of the prototype. In the following example, I added a prototype q method to enable this behavior. Properties inherited from the prototype are displayed inside the proto object of the internal property:

---

If you just want to have the number of object instances in the constructor 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 ES5 dependency:

 var foo = function() { foo.prototype.p++; } foo.prototype.p = 0; console.log(new foo()); //{p: 1} console.log(new foo()); //{p: 2} 

Answer 2

The bar object has only one p with a value of 1

An earlier p with a value of 2 can be viewed in the 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 display all the properties, whether it is available directly or not.

Answer 3

Yes. Sorting.

bar has both parameters:

• A p property own .

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

• A p property remains on the prototype , which it has inheritance.

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

Although, only one of them is available directly from bar at a time, with a preference for its own property.

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

And Chrome shows both because it crosses the prototype chain and looks for any enumerable properties.

Answer 4

var foo=function(){this.p=1;} is a constructor and is executed after var bar=new foo(); . So, at the beginning p = 2, and then p becomes equal to 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); 

Answer 5

When you join a property, the javascript engine will look for it on the instance of the object, and then on the entire prototype chain.
Thus, the value of p as a property of the prototype is to have a default value for p if you define it in any instance of the class or not. One example is the number of wheels for a vehicle, which can default to 4, for example.
If you write this property later:

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

You will not change the value set on the prototype, but instead, you will create a new property in the instance with a new value, for example, for example:

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

Now the very script that you specify - setting the default value and setting the instance value in the constructor - doesn’t make much sense, since you will need to use Object.getPrototypeOf to reach the default value. This is just an opportunity that is useless, like in many languages.