__proto__ : function declaration versus object literal

Question

I've just started reading this article and I'm stuck on the first paragraph:

For the code:

var foo = { x: 10, y: 20 };

we have the structure with two explicit own properties and one implicit proto property, which is the reference to the prototype of foo:

Figure 1. A basic object with a prototype.

My question...

Why does the diagram show a foo prototype for a basic object literal?

If I create two objects, it shows this isn't the case:-

• object one - a function object / constructor function
• object two - a basic object literal with key/value pairs like a dictionary

If I use the debugger, it shows that object one does indeed create a One.prototype which also has an Object.prototype further down the chain, but object two does not have a two.prototype, instead it goes straight to the Object.prototype.

Have i misunderstood the proto concept or is the article incorrect by implying object literals have their own prototype?

---

EDIT: I've given up reading the article, it's broken English makes a complicated subject more complicated.

The guy in this video answers my question and to sum it up:

• every object has a __ proto __
• only functions have a prototype
• prototype is the template used when using new operator

Answer 1

The __proto__ comes from the constructor's prototype.

In the first case, One is your constructor. You haven't assigned anything to One.prototype, so it defaults to a Object's __proto__ and you get the two levels of inheritance.

If you had added things to that object, they would show up as part of the One prototype.

function One() {
  this.x = 4;
  this.y = 'hhh';
}
One.prototype.z = 'foobar';

var one = new One();

In the second case, you are creating an object literal which has Object as it's prototype, so you only inherit from the Object prototype. Prototypes are objects themselves, so if you were to add properties to it, like so:

foo.__proto__.z = 'foobar';

You are modifying the instance of Object that is foo's prototype, it doesn't modify Object itself, only that particular instance of it. That is what the article means, by foo's prototype.

I just did a test in V8 and it seems an object literal doesn't have an instance of Object as it's prototype, it has Object's __proto__ itself, so you should not modify foo.__proto__, you would be modifying the underlying Object prototype that all Objects inherit from. If you do wish do modify it, you should create a new instance of Object first to add to:

foo.__proto__ = {};
foo.__proto__.z = 'foobar';

Example:

var x = {};
x.__proto__ = {};
x.__proto__.z = 'foobar';
var y = {};
y.z; // undefined
Object.z; // undefined

vs.

var x = {};
x.__proto__.z = 'foobar';
var y = {};
y.z; // 'foobar'
Object.z; // 'foobar'

In my opinion, it would be better if object literals automatically created a new instance of Object for their __proto__. Then again, there is no real reason in modifying the prototype of an object literal.

Also note that you should not use __proto__ directly, as it is deprecated, and its future replacement is strongly discouraged as well. You should use Object.create for implementing inheritance in Javascript.

Answer 2

There are two interrelated concepts with prototype in JavaScript:

First, there is a prototype property that every JavaScript function has (it is empty by default), and you attach properties and methods on this prototype property when you want to implement inheritance.Note that this prototype property is not enumerable: it is not accessible in a for/in loop. But Firefox, and most versions of Safari and Chrome, have a __ proto__ “pseudo” property (an alternative way) that allows you to access an object’s prototype property. You will likely never use this __ proto__ pseudo property, but know that it exists and it is simply a way to access an object’s prototype property in some browsers. The prototype property is used primarily for inheritance: you add methods and properties on a function’s prototype property to make those methods and properties available to instances of that function.

The second concept with prototype in JavaScript is the prototype attribute. Think of the prototype attribute as a characteristic of the object; this characteristic tells us the object’s “parent”. In simple terms: An object’s prototype attribute points to the object’s “parent”—the object it inherited its properties from. The prototype attribute is normally referred to as the prototype object, and it is set automatically when you create a new object.To expound on this: Every object inherits properties from some other object, and it is this other object that is the object’s prototype attribute or “parent.” (You can think of the prototype attribute as the lineage or the parent). In the example code above, newObj‘s prototype is PrintStuff.prototype.