Adding a prototype to an object literal

Question

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?

Answer 1

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.

Answer 2

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.