Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@parallaxisjones
Forked from remarkablemark/README.md
Created July 17, 2018 20:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save parallaxisjones/ceeed366138daec7683debe94f63473b to your computer and use it in GitHub Desktop.
Save parallaxisjones/ceeed366138daec7683debe94f63473b to your computer and use it in GitHub Desktop.
Classes - ES5 vs ES6

JavaScript Classes - ES5 vs ES6

An example that shows the difference between creating a JavaScript class and subclass in ES5 and ES6.

Reference

'use strict';
/**
* Shape class.
*
* @constructor
* @param {String} id - The id.
* @param {Number} x - The x coordinate.
* @param {Number} y - The y coordinate.
*/
function Shape(id, x, y) {
this.id = id;
this.setLocation(x, y);
}
/**
* Set shape location.
*
* @param {Number} - The x coordinate.
* @param {Number} - The y coordinate.
*/
Shape.prototype.setLocation = function(x, y) {
this.x = x;
this.y = y;
};
/**
* Get shape location.
*
* @return {Object}
*/
Shape.prototype.getLocation = function() {
return {
x: this.x,
y: this.y
};
};
/**
* Get shape description.
*
* @return {String}
*/
Shape.prototype.toString = function() {
return 'Shape("' + this.id + '")';
};
/**
* Circle class.
*
* @constructor
* @param {String} id - The id.
* @param {Number} x - The x coordinate.
* @param {Number} y - The y coordinate.
* @param {Number} radius - The radius.
*/
function Circle(id, x, y, radius) {
Shape.call(this, id, x, y);
this.radius = radius;
}
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
/**
* Get circle description.
*
* @return {String}
*/
Circle.prototype.toString = function() {
return 'Circle > ' + Shape.prototype.toString.call(this);
};
// test the classes
var myCircle = new Circle('mycircleid', 100, 200, 50); // create new instance
console.log(myCircle.toString()); // Circle > Shape("mycircleid")
console.log(myCircle.getLocation()); // { x: 100, y: 200 }
'use strict';
/**
* Shape class.
*
* @constructor
* @param {String} id - The id.
* @param {Number} x - The x coordinate.
* @param {Number} y - The y coordinate.
*/
class Shape(id, x, y) {
constructor(id, x, y) { // constructor syntactic sugar
this.id = id;
this.setLocation(x, y);
}
/**
* Set shape location.
*
* @param {Number} - The x coordinate.
* @param {Number} - The y coordinate.
*/
setLocation(x, y) { // prototype function
this.x = x;
this.y = y;
}
/**
* Get shape location.
*
* @return {Object}
*/
getLocation() {
return {
x: this.x,
y: this.y
};
}
/**
* Get shape description.
*
* @return {String}
*/
toString() {
return `Shape("${this.id}")`;
}
}
/**
* Circle class.
*
* @constructor
* @param {String} id - The id.
* @param {Number} x - The x coordinate.
* @param {Number} y - The y coordinate.
* @param {Number} radius - The radius.
*/
function Circle extends Shape {
constructor(id, x, y, radius) {
super(id, x, y); // call Shape's constructor via super
this.radius = radius;
}
/**
* Get circle description.
*
* @return {String}
*/
toString() { // override Shape's toString
return `Circle > ${super.toString()}`; // call `super` instead of `this` to access parent
}
}
// test the classes
var myCircle = new Circle('mycircleid', 100, 200, 50); // create new instance
console.log(myCircle.toString()); // Circle > Shape("mycircleid")
console.log(myCircle.getLocation()); // { x: 100, y: 200 }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment