Javascript Inheritance With Object.create()?

How do I inherit with the Object.create()? I tried these, but none are working: var B = function() {}; var A = function() {}; A = Object.create(B); A.prototype.C = function() {};

Solution 1:

There are several ways of doing inheritance in JavaScript

Construction Inheritance. Used if you don't need to call supertype constructor:

functionRectangle(length, width) { 
    this.length = length;
    this.width = width;
}

Rectangle.prototype.getArea = function() {
    returnthis.length * this.width;
};

// inherits from RectanglefunctionSquare(size) { 
    this.length = size;
    this.width = size;
}

Square.prototype = Object.create(Rectangle.prototype);

var rect = newRectangle(6, 8);
var square = newSquare(10);

console.log(rect.getArea());                // 48console.log(square.getArea());              // 100console.log(rect instanceofRectangle);     // trueconsole.log(rect instanceofObject);        // trueconsole.log(square instanceofSquare);      // trueconsole.log(square instanceofRectangle);   // trueconsole.log(square instanceofObject);      // true

Constructor Stealing. Used if need to call supertype constructor:

functionRectangle(length, width) { 
    this.length = length;
    this.width = width;
}

Rectangle.prototype.getArea = function() {
    returnthis.length * this.width;
};

// inherits from RectanglefunctionSquare(size) { 
    Rectangle.call(this, size, size);
}

Square.prototype = Object.create(Rectangle.prototype);

var rect = newRectangle(6, 8);
var square = newSquare(10);

console.log(rect.getArea());                // 48console.log(square.getArea());              // 100console.log(rect instanceofRectangle);     // trueconsole.log(rect instanceofObject);        // trueconsole.log(square instanceofSquare);      // trueconsole.log(square instanceofRectangle);   // trueconsole.log(square instanceofObject);      // true

Solution 2:

Object.create() is used to inherit objects, not constructors like you're trying to do. It pretty much creates a new object with the old object set as its prototypal parent.

var A = function() { };
A.prototype.x = 10;
A.prototype.say = function() { alert(this.x) };

var a = newA();
a.say(); //alerts 10var b = Object.create(a);
b.say(); //alerts 10
b.x = 'hello';
b.say(); //alerts 'hello'

And just to make sure b is not just a clone of a,

a.x = 'goodbye';
delete b.x;
b.say(); //alerts 'goodbye'

Solution 3:

The pattern I use for this is to wrap each type in a module, and expose create and prototype properties, like so:

varVehicle = (function(){
        varexports = {};
        exports.prototype = {};
        exports.prototype.init = function() {
                this.mph = 5;
        };
        exports.prototype.go = function() {
                console.log("Going " + this.mph.toString() + " mph.");
        };

        exports.create = function() {
                var ret = Object.create(exports.prototype);
                ret.init();
                return ret;
        };

        returnexports;
})();

Then I can build derived types like so:

varCar = (function () {
        varexports = {};
        exports.prototype = Object.create(Vehicle.prototype);
        exports.prototype.init = function() {
                Vehicle.prototype.init.apply(this, arguments);
                this.wheels = 4;
        };

        exports.create = function() {
                var ret = Object.create(exports.prototype);
                ret.init();
                return ret;
        };

        returnexports; 

})();

with this pattern, each type has its own create() function.

Solution 4:

The original documentation for Douglas' Object.create is here http://javascript.crockford.com/prototypal.html . Make sure you have included the definition of the the method

if (typeofObject.create !== 'function') {
    Object.create = function (o) {
        functionF() {}
        F.prototype = o;
        returnnewF();
    };
}

Solution 5:

You can define Object.create yourself, but if it is not native you will have to deal with it being enumerated in every for in loop you use for objects.

So far only new webkits- Safari5 and Chrome natively support it.