JavaScript inheritance with Object.create()?

javascript object inheritance object-create
Tower picture Tower · Jun 20, 2010 · Viewed 16.7k times · Source

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() {};

and

var B = function() {};
var A = function() {};
A.prototype.C = function() {};
A = Object.create(B);

and

var B = function() {};
A = Object.create(B);
var A = function() {};
A.prototype.C = function() {};

Nothing worked. How am I supposed to use this new Object.create()-function?

Answer

Vlad Bezden picture Vlad Bezden · Jan 2, 2014

There are several ways of doing inheritance in JavaScript

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

function Rectangle(length, width) { 
    this.length = length;
    this.width = width;
}

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

// inherits from Rectangle
function Square(size) { 
    this.length = size;
    this.width = size;
}

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

var rect = new Rectangle(6, 8);
var square = new Square(10);

console.log(rect.getArea());                // 48
console.log(square.getArea());              // 100
console.log(rect instanceof Rectangle);     // true
console.log(rect instanceof Object);        // true
console.log(square instanceof Square);      // true
console.log(square instanceof Rectangle);   // true
console.log(square instanceof Object);      // true

Constructor Stealing. Used if need to call supertype constructor:

function Rectangle(length, width) { 
    this.length = length;
    this.width = width;
}

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

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

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

var rect = new Rectangle(6, 8);
var square = new Square(10);

console.log(rect.getArea());                // 48
console.log(square.getArea());              // 100
console.log(rect instanceof Rectangle);     // true
console.log(rect instanceof Object);        // true
console.log(square instanceof Square);      // true
console.log(square instanceof Rectangle);   // true
console.log(square instanceof Object);      // true

Related questions

JavaScript Extending Class

I have a base class: function Monster() { this.health = 100; } Monster.prototype.growl = function() { console.log("Grr!"); } That I want to extend and create another class with: function Monkey extends Monster() { this.bananaCount = 5; } Monkey.prototype.eatBanana { this.bananaCount--; this.health++; //Accessing …

Read More
Checking if a key exists in a JavaScript object?

How do I check if a particular key exists in a JavaScript object or array? If a key doesn't exist, and I try to access it, will it return false? Or throw an error?

Read More
What is the most efficient way to deep clone an object in JavaScript?

What is the most efficient way to clone a JavaScript object? I've seen obj = eval(uneval(o)); being used, but that's non-standard and only supported by Firefox. I've done things like obj = JSON.parse(JSON.stringify(o)); but question the …

Read More