Setting prototype for Object Literal

Question

Let's say I have the following code;

var A = {a:10};
var B = {b:20};
B.prototype = A;
alert(B.a);

I am getting undefined for B.a . Am I doing something wrong? How do I set the prototype for object literal ?

I know how to do for Constructor object. So the following code works perfect

function A(){this.a=10}
function B(){this.b=20}
B.prototype = new A();
b = new B;
alert(b.a);

How do I do it for object literal ?

Possible duplicate of http://stackoverflow.com/questions/9959727/java-script-what-is-the-difference-between-proto-and-prototype or http://stackoverflow.com/questions/572897/how-does-javascript-prototype-work?lq=1 or http://stackoverflow.com/questions/650764/how-does-proto-differ-from-constructor-prototype?rq=1 or http://stackoverflow.com/questions/9451881/prototype-vs-prototype-what-is-the-difference-mycons-proto-myco/9451979#9451979 — Dagg Nabbit, Mar 18 '13 at 08:56

score 12 · Answer 1 · answered Mar 18 '13 at 09:18

12

Objects inherit from their constructor's prototype property, not their own. The constructor's prototype is assigned to the internal [[Prototype]] property that is available in some browsers as the __proto__ property.

So for b to inherit from a, you need to put a on b's inheritance chain, e.g.

Classic prototype inheritance:

var a = {a: 'a'};
function B(){}
B.prototype = a;

var b = new B();
alert(b.a); // a

Using ES5 Object.create:

var a = {a: 'a'};
var b = Object.create(a);

alert(b.a); // a

Using Mozilla __proto__:

var a = {a: 'a'};
var b = {};
b.__proto__ = a;

alert(b.a); // a

answered Mar 18 '13 at 09:18

RobG

142,382
31
172
209

Looking at the ES5 Object.create example, how would you augment `a`, once `a` is on `b`'s inheritance/prototype chain? – Michel Hébert Aug 15 '13 at 22:17
`a`'s properties need to be augmented directly, e.g. `a.foo = 'foo'`. Assigning to `b` will create a property of `b`, even if a same–named property exists on `a`. – RobG Jun 09 '14 at 22:58
@RobG Might reword that as "assigning to `b` will create a property on `b`" instead of "property of `b`". – cchamberlain Aug 29 '16 at 00:48

score 3 · Answer 2 · answered Mar 18 '13 at 08:21

The prototype property is usually present in a Function object. This prototype should be an object, and this object is used to define the properties of an object created with a constructor.

// Plain object, no prototype property here.
var plainObject = {one: 1, two: 2};

// Constructor, a prototype property will be created by default
var someConstruct = function() {

  // Constructor property
  someConstruct.constructProp = "Some value";

  // Constructor's prototype method
  someConstruct.prototype.hello = function() {
    return "Hello world!";
  }
};

// Another constructor's prototype method
someConstruct.prototype.usefulMethod = function() {
  return "Useful string";
}

var someInstance = new someConstruct();
console.log(someInstance.hello()); // => Hello world!
console.log(someInstance.usefulMethod()); // => Useful string

console.log(someConstruct.constructProp); // => Some value
console.log(someConstruct.prototype); // => {usefulMethod: function, hello: function}

console.log(plainObject.prototype); // => undefined

So, plain objects have no prototypes. Functions which work as constructors do have prototypes. These prototypes are used to fill an instance created with each construct.

Hope that helps :)

What is the difference of defining a propert directly Vs on the prototype....like in the above case someConstruct.constructProp Vs someConstruct.prototype.somePrototypeProperty — copenndthagen, Mar 18 '13 at 09:12

score 0 · Answer 3 · answered Mar 18 '13 at 08:52

Only when using Function object that prototype is used, e.g. when you use a constructor. But no need of that for object literals.

Both of them are very good techniques, so it depends on what you want to do in a project and the JavaScript pattern you are using or like.

Setting prototype for Object Literal

3 Answers3

Linked