JavaScript inheritance with Object.create()?
Solution 1
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 = new A();
a.say(); //alerts 10
var 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 2
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
Solution 3
The pattern I use for this is to wrap each type in a module, and expose create
and prototype
properties, like so:
var Vehicle = (function(){
var exports = {};
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;
};
return exports;
})();
Then I can build derived types like so:
var Car = (function () {
var exports = {};
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;
};
return exports;
})();
with this pattern, each type has its own create()
function.
Tower
Updated on June 07, 2022Comments
-
Tower about 2 years
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?