Skip to content

Instantly share code, notes, and snippets.

@remarkablemark
Last active June 8, 2024 21:48
Show Gist options
  • Save remarkablemark/fa62af0a2c57f5ef54226cae2258b38d to your computer and use it in GitHub Desktop.
Save remarkablemark/fa62af0a2c57f5ef54226cae2258b38d 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

/**
* 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 }
/**
* Shape class.
*
* @constructor
* @param {String} id - The id.
* @param {Number} x - The x coordinate.
* @param {Number} y - The y coordinate.
*/
class Shape {
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.
*/
class 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 }
@SakoMe
Copy link

SakoMe commented Jul 5, 2017

class Shape(id, x, y) {
^

SyntaxError: Unexpected token (
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Function.Module.runMain (module.js:605:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3

When running the es6 version...

@patw0929
Copy link

patw0929 commented Jul 5, 2017

- class Shape(id, x, y) {
+ class Shape {

is it correct?

@wzhouwzhou
Copy link

@patw0929 yes

@dhei
Copy link

dhei commented Jan 1, 2018

In ES6 version there are two syntax issues:

(1) class Shape(id, x, y) { should be class Shape { at this line as pointed out by @SakoMe.
(2) function Circle extends Shape { should be class Circle extends Shape { at this line.

@samir64
Copy link

samir64 commented Aug 23, 2018

Please visit my javascript (es5) class manager:
https://gist.github.com/samir64/a1ab7678bd9bda66dbc157d99fc59482

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment