Adding a prototype to an object literal

Question

I have some object, say son , that I would like to inherit from another father object.

Of course, I can create a constructor function for my father, for example

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

And then use

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

but that’s not quite what I want. Since son will have many properties, it would be more readable if the son were declared as an object literal. But then I do not know how to install it protoype.

Doing something like

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

will not work because the prototype chain seems hidden and does not care about changing the constructor. prototype.

I think I can use the __proto__ property in Firefox, for example

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

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

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

Answer 1

You are right, __proto__ is a non-standard property, and there are only two standard ways to set a new object [[Prototype]] :

• Using the constructor and the new operator (as you already mentioned).
• Using the ECMAScript 5 Object.create .

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

It can take two arguments, the first is an object that will be used as the [[Prototype]] new object, and the second is another object where its own properties can be described (in the same structure as 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 internal [[Prototype]] son property will refer to father , and it will contain a value called thirdProperty .

Answer 2

This is the wrong 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 

This means that you are doing:

 X.prototype = {} 

just creates an object called a prototype. Not a real prototype. To use a prototype, you must use the constructor functions.

if you modify it (constructor)

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

That will work.

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

Answer 3

Defining a prototype for an object literal is a bit "inconvenient" because first of all you want a prototype of objects created using the constructor syntax (for example, the new X ()). Not to say that this is impossible ... but it is strange. A similar model, which is well proven (for example, using jQuery), is to instead define the prototype as an object literal. For example:

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