I have some object, say son, which I'd like to inherit from another object father.

Of course I can make a constructor function for father, like

Father = function() {
  this.firstProperty = someValue;
  this.secondProperty = someOtherValue;
}

And then use

var son = new Father();
son.thirdProperty = yetAnotherValue;

but this is not exactly what I want. Since son is going to have many properties, it would be more readable to have son declared as an object literal. But then I don't know how to set its protoype.

Doing something like

var father = {
  firstProperty: someValue;
  secondProperty: someOtherValue;
};
var son = {
  thirdProperty: yetAnotherValue
};
son.constructor.prototype = father;

will not work, as the prototype chain seems to be hidden and not care about the change of constructor.prototype.

I think I can use the __proto__ property in Firefox, like

var father = {
  firstProperty: someValue;
  secondProperty: someOtherValue;
};
var son = {
  thirdProperty: yetAnotherValue
  __proto__: father
};
son.constructor.prototype = father;

but, as far as I understand, this is not a standard feature of the language and it is better not to use it directly.

Is there a way to specify the prototype for an object literal?

I have some object, say son, which I'd like to inherit from another object father.

Of course I can make a constructor function for father, like

Father = function() {
  this.firstProperty = someValue;
  this.secondProperty = someOtherValue;
}

And then use

var son = new Father();
son.thirdProperty = yetAnotherValue;

but this is not exactly what I want. Since son is going to have many properties, it would be more readable to have son declared as an object literal. But then I don't know how to set its protoype.

Doing something like

var father = {
  firstProperty: someValue;
  secondProperty: someOtherValue;
};
var son = {
  thirdProperty: yetAnotherValue
};
son.constructor.prototype = father;

will not work, as the prototype chain seems to be hidden and not care about the change of constructor.prototype.

I think I can use the __proto__ property in Firefox, like

var father = {
  firstProperty: someValue;
  secondProperty: someOtherValue;
};
var son = {
  thirdProperty: yetAnotherValue
  __proto__: father
};
son.constructor.prototype = father;

but, as far as I understand, this is not a standard feature of the language and it is better not to use it directly.

Is there a way to specify the prototype for an object literal?

• javascript
• oop
• prototype-programming

• stackoverflow./questions/1592384/… – Camilo Martin Commented Dec 1, 2012 at 20:04

4 Answers 4

You're right, __proto__ is a non-standard property, and the only two standard ways you have to set a new object's [[Prototype]], are:

• Through the use of a constructor and the new operator (as you already mention).
• Using the ECMAScript 5 Object.create method.

Object.create is not widely supported yet (works on IE9Pre3+, Firefox 3.7Alpha+, Chrome 5+ Safari 5+, Rhino 1.7), but at some point all the implementations will conform the ES5 spec.

It can take two arguments, the first one is the object that will be used as the [[Prototype]] of the new object, and the second one, is another object where the own properties can be described (in the same structure that you would use Object.defineProperties).

For example:

var father = {
  firstProperty: 1,
  secondProperty: 2
};

var son = Object.create(father, {
  thirdProperty: {
    value: 'foo'
  }
});

father.isPrototypeOf(son); // true
son.firstProperty; // 1

The son internal [[Prototype]] property will refer to father, and it will contain a value property named thirdProperty.

That's incorrect jmar777. If for example you have

var X = function() {};
X.prototype = {
  protoFunc1: function() { console.log('p1');},
  protoFunc2: function() { console.log('p2');}
};

X.protoFunc1(); // is not a function 

That means that what you're doing:

X.prototype = {}

is just creating an object called prototype. Not the actual prototype. To use prototype you have to use constructor functions.

if however you modify it to this (constructor method)

function X(){};
X.prototype.protoFunc1 = function() { 
    console.log('p1');
}
X.prototype.protoFunc2 = function() { 
    console.log('p2');
}

var x = new X();
x.protoFunc1(); //'p1'

It would work.

Either go the object literal method without using prototype or use the contructor method using prototype.

With ES2015 and later, you can use the literal __proto__ as the property name to setup the prototype right in the object literal. So, you could do something like this for your case:

const father = {
  firstProperty: someValue,
  secondProperty: someOtherValue,
};
const son = {
  __proto__: father,
  thirdProperty: yetAnotherValue,
};

Here is a nice post about this.

Specifying the prototype for an object literal is a little "wonky", since you'll primarily want the prototype on objects that you create using the constructor syntax (e.g., new X()). Not saying this isn't possible... but it's strange. A similar pattern that is well proved out (used by jQuery, for example), is to instead define the prototype as an object literal. For example:

var X = function() {};
X.prototype = {
  protoFunc1: function() {},
  protoFunc2: function() {}
};