Skip to content

Instantly share code, notes, and snippets.

@lcherone lcherone/README.md forked from remarkablemark/README.md
Last active Apr 9, 2018

Embed
What would you like to do?
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.

'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 {
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 }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.