JS Classes Example

Server (NodeJS) Side:

////////// _myDummyModule.js

// A really bad usecase is demonstrated here.
var count = 1;
exports.increment = function() {
    count++;
};
exports.getCount = function() {
    return count;
};
////////// _myDummyModuleClass.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
// Noob caveat: If you want to OVERWRITE *module.exports*, do it directly!
// (i.e. if you overwrite the 'exports' alias instead, it will be meaningless;
// because exports=module.exports... you should: module.exports=yourNewObject)
module.exports = class Calculator { // Doesn't really matter that it's named
  constructor(initialValue) {
    this.count = initialValue===undefined ? 1 : initialValue;
  }
  increment() { this.count++; }
  getCount() { return this.count; }
}
////////// _myNotesOnJS.js

// module.exports is the variable that gets returned from require().
// 'exports' is just an "alias" to module.exports.
console.log(module.exports == exports); // => true

// Requiring twice can be problematic!
const a = require('./_myDummyModule.js');
const b = require('./_myDummyModule.js');
console.log(typeof a); // => object
console.log(a==b, a===b); // => true true
a.increment(); // We increment a, but b (which is ==a) is also incremented :(
console.log(a.getCount()); // => 2
console.log(b.getCount()); // => 2

// How to use a class
const c = require('./_myDummyModuleClass.js');
c1 = new c();
c2 = new c();
c3 = new c(123);
console.log(typeof c); // => function
console.log(typeof c1); // => object
console.log(c1 == c2); // => false
c1.increment(); // OK: We increment only c1
console.log(c1.getCount(), c2.getCount(), c3.getCount()); // 2 1 123

Client side:

////////// _myDummyClassClientSide.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
// Noob caveat: If you want to OVERWRITE *module.exports*, do it directly!
// (i.e. if you overwrite the 'exports' alias instead, it will be meaningless;
// because exports=module.exports... you should: module.exports=yourNewObject)
module.exports = class Calculator { // Doesn't really matter that it's named
  constructor(initialValue) {
    this.count = initialValue===undefined ? 1 : initialValue;
  }
  increment() { this.count++; }
  getCount() { return this.count; }
}
////////// _myDummyClassLikeClientSide.js
function Apple(appleType) {
    this.appleType = appleType;
    this.color = "red";
}
Apple.prototype.updateColor = function(color) {
  this.color = color;
}
Apple.prototype.getInfo = function() {
    return this.color + ' ' + this.appleType + ' apple';
};
module.exports = Apple;
////////// someClientJS.js
// (note: make sure you enable ES2015 in the gulpfile for this to run...)
const MyDummyClass = require('./_myDummyClassClientSide.js');
let c1 = new MyDummyClass();  // private 'count' initialzied to 1 by default
let c2 = new MyDummyClass(17);
console.log(typeof MyDummyClass); // => function
console.log(typeof c1); // => object
console.log(c1 == c2); // => false
c1.increment(); // OK: We increment only c1
console.log(c1.getCount(), c2.getCount()); // 2 17
// (note: the following is in vanilla JS; no need for ES2015)
var MyDummyClass = require('./_myDummyClassLikeClientSide.js');
console.log(MyDummyClass); // => ƒ n(e){this.appleType=e,this.color="red"}
var a1 = new MyDummyClass();
var a2 = new MyDummyClass('aaaaaaa');
console.log(a1.getInfo()); // => red undefined apple
console.log(a2.getInfo()); // => red aaaaaaa apple
a1.updateColor('newcolor');
console.log(a1.getInfo()); // => newcolor undefined apple
console.log(a2.getInfo()); // => red aaaaaaa apple

Leave a Reply

Your email address will not be published. Required fields are marked *