Object.create vs direct prototypical inheritance

Question

I have been playing around with Object.create in the EcmaScript 5 spec, and I am trying to create a multiple inheritance type structure.

Say I have a few functions: a, b, and c. With only dealing with prototypes, I can do this:

function a () {}
a.prototype = {
    fnA = function () {},
    propA = 500
};

function b () {}
b.prototype = a.prototype;
b.prototype.fnB = function () {};
b.prototype.propB = 300;

function c () {}
c.prototype = b.prototype;
c.prototype.fnC = function () {};
c.prototype.propC = 200;

But using Object.create, I would do something this:

function a() {}
a.prototype = {
    fnA = function () {},
    propA = 500
};

var b = Object.create(new a());
b.fnB = function () {};
b.propB = 300;

var c = Object.create(b);
c.fnC = function () {};
c.propC = 200;

I think I get the same result both ways.

This seems kinda clunky, because I get on object back instead of a constructor function. It seems to me that doing the regular prototypical inheritance is less intrusive and makes more sense for modular applications that don't need any special treatment to work.

Am I missing anything? Is there any benefit of trying to make Object.create with making constructors? Or is this only useful for copying existing objects? I only want access to properties & functions attached to the prototype, and not functions and properties added afterward to the object.

Or what about this (or use a better deep-copy, but the idea remains the same)?

function A () {}
A.prototype = {
    fn: function () {
        console.log(this.propA + 30);
    },
    propA: 20
};

function B () {}
Object.keys(A.prototype).forEach(function (item) {
    B.prototype[item] = A.prototype[item];
});
B.prototype.propA = 40;

function C () {}
Object.keys(B.prototype).forEach(function (item) {
    C.prototype[item] = B.prototype[item];
});
C.prototype.fn = function () {
    console.log(this.propA + 3);
};


var a = new A(),
    b = new B(),
    c = new C();

a.fn();
b.fn();
c.fn();

user_1489487 · Answer

If you need to support browsers that don't support Object.create() you can use this

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

The object function untangles JavaScript's constructor pattern, achieving true prototypal inheritance. It takes an old object as a parameter and returns an empty new object that inherits from the old one. If we attempt to obtain a member from the new object, and it lacks that key, then the old object will supply the member. Objects inherit from objects. What could be more object oriented than that?

More can be read here : Prototypal Inheritance in JavaScript

Object.create vs direct prototypical inheritance

2 Answers