Why doesn't an initialized JavaScript object contain the prototype object?

Question

I tried to use the following code to add a start method to an object:

var Bounce = Bounce || {
    Info : {},
    Game : {}
};

Bounce.Game.prototype.start = function() {
    Bounce.log("Starting " + new Bounce.Info());
}

But this results in the following error (on the Bounce.Game.prototype.start line):

Uncaught TypeError: Cannot set property 'start' of undefined

Looking at the object in Chrome's console, I can see that it doesn't contain the prototype object (but has toString, valueOf and constructor etc.).

This is easily fixed by adding the following line before the prototype access:

Bounce.Game = function() {};

I don't know why this is necessary when the object has already been initialized?

W3Schools tells me "Every JavaScript object has a prototype", but that doesn't appear to be the case.

Conceptually, all objects have a prototype, but only function objects have prototype property. They are not the same. If you read the ECMAScript spec, prototype is usually represented like [[Prototype]] which is an implementation detail lies in the JS engine rather than a language feature. However, in some engines [[Prototype]] can be accessed with __proto__ property. — Leo
– Leo, Commented Jan 2, 2015 at 11:30
No. Every object has a prototype. It does not, however, have a property named prototype. Two different things. Yes, this is confusing. But they are related by the fact that the function's prototype property becomes the actual prototype for new objects created using that function as a constructor. — Mark Reed
– Mark Reed, Commented Jan 2, 2015 at 11:32
Should really note that __proto__ is non-standard - there are better patterns. — Emissary
– Emissary, Commented Jan 2, 2015 at 11:35
@Leo is right, however you won't be able to call Bounce.Game.start(). check this out: jsbin.com/bapuvo/1/edit?html,js,console,output — balanza
– balanza, Commented Jan 2, 2015 at 11:55

Leo · Accepted Answer · 2015-01-02 12:53:56Z

4

Conceptually, all objects do have a prototype, but only function objects (including constructors like Object, Array, although they don't produce functions) have a property named prototype. They are not the same.

If you read the ECMAScript spec, prototype is usually represented like [[Prototype]], which is an implementation detail lies in the JS engine, rather than a language feature. However, in some engines [[Prototype]] is exposed and can be accessed with __proto__ property (non-standard).

By the way:

If you want to access [[Prototype]], Object.getPrototypeOf() is your friend.
When using a instanceof b, it's actually comparing a's [[Prototype]] chain with b's prototype property.

And why we say null is the prototype of all? It's also not referring to prototype but [[Prototype]]:

Object.getPrototypeOf(Object.getPrototypeOf({})) // null
Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf([]))) // null
Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(new String("")))) // null

// or shorter like this
({}).__proto__.__proto__ // null
([]).__proto__.__proto__.__proto__ // null
("").__proto__.__proto__.__proto__ // null

edited Jan 2, 2015 at 12:53

answered Jan 2, 2015 at 12:22

Leo

13.9k5 gold badges47 silver badges64 bronze badges

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

1 Comment

balanza Over a year ago

this make me think about a workaround... I'll write an answer

Community · Accepted Answer · 2017-05-23 10:28:17Z

2

So, inspired by @Leo comments, I think about this solution to use a plain {} object with its prototype.

We have this object:

var Bounce = Bounce || {
    Info : {},
    Game : {}
};

We define the prototype property for the given object

Object.defineProperty(Bounce.Game, 'prototype', {
    get: function() {
      return Object.getPrototypeOf(Bounce.Game); 
    }
});

Now, we can use prototype as usual:

Bounce.Game.prototype.start = function(){
  console.log('start');
};

Bounce.Game.start();

Check this out: http://jsbin.com/bapuvo/3/edit

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jan 4, 2015 at 15:37

balanza

1,0811 gold badge13 silver badges34 bronze badges

3 Comments

Leo Over a year ago

Interesting approach. But why not simply Bounce.Game.start = function... ?

balanza Over a year ago

A prototype is meant to be "shared" across different instances, for inheritance and memory-saving reason. This solution is for the problem as @Mikaveli proposed, maybe I'll never use this approach. For instance, we don't know where this code is used and how: if it's in a full CommonJS-compliant environment, I'd rather use a proper module design solution (think about nodejs or titanium).

balanza Over a year ago

@Leo answering your question: yes, it's the same. As you are not gonna use new operator with a plain object, using prototype became pointless.

Collectives™ on Stack Overflow

Why doesn't an initialized JavaScript object contain the prototype object?

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related