Classical and ES5 JavaScript inheritance

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):

One thought on “Classical and ES5 JavaScript inheritance

  1. It’s actually a great and helpful piece of info. I am happy that you shared this useful information with us. Please stay us informed like this. Thank you for sharing.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s