The inheritance and OOP concept is in JavaScript really hard to learn because there is not any standards for that like in Java or PHP. There is no structure like class, the keyword is in strict mode reserved keyword but no implementation or use. In JavaScript there are functions and using prototype to implement some of the OOP conception. That is why I made small example how to use the JavaScript objects in classical and ES5 way. This is not the complete example of OO.
Classical example and using the NEW keyword:
(function(document) {
'use strict';
var Shape = function() { };
Shape.prototype = {
x: 30,
y: 30,
width: 25,
height: 25,
draw: function(ctx) {
throw new Error("This is parent method");
},
print: function() {
console.log(this.x + ':' + this.y + ' ' + this.width + '<>' + this.height);
}
};
var Circle = function() { this.radius = 20; };
Circle.prototype = new Shape();
Circle.prototype.draw = function(ctx) {
ctx.arc(12, 22, 66, 0, 2 * Math.PI, false);
};
var Square = function() { };
Square.prototype = new Shape();
Square.prototype.draw = function(ctx) {
ctx.fillRect(this.x, this.y, this.width, this.height);
};
var canvas = document.getElementById('panel');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var perfectCircle = new Circle();
var mySquare = new Square();
mySquare.draw(ctx);
mySquare.print();
perfectCircle.draw(ctx);
perfectCircle.print();
}
})(document);
ES5 example:
(function(document, console) {
'use strict';
var Shape = Object.create({
x: 30,
y: 30,
width: 25,
height: 25,
draw: function(ctx) {
throw new Error("This is parent method");
},
print: function() {
console.log(this.x + ':' + this.y + ' ' + this.width + '<>' + this.height);
}
});
var Circle = Object.create(Shape);
Circle.radius = 10;
Circle.draw = function(ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
ctx.stroke();
};
var Square = Object.create(Shape);
Square.draw = function(ctx) {
ctx.fillRect(this.x, this.y, this.width, this.height);
};
// Drawing to canvas
var canvas = document.getElementById('panel');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var perfectCircle = Object.create(Circle);
var mySquare = Object.create(Square);
mySquare.draw(ctx);
mySquare.print();
perfectCircle.draw(ctx);
perfectCircle.print();
}
})(document, console);
Also the html to get the example working:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Inheritance example</title> </head> <body> <canvas id="panel" width="150" height="150">Canvas not supported get better browser</canvas> </body> </html>
Result image should be something like this(well only the shapes not gradient):
Estonian dev site 