Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 24, 2020 01:48 pm GMT

History of classes in JS

What is a class in the programming language world?

Class gives a blueprint for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods)

By default almost all object-oriented languages(Python, Java, C++..) support classes. They provide a way to create objects with some state and behavior.

Example in Python:

# Class declarationclass Train:    def __init__(self):        self._source = ""        self._destination = ""    def set_source(self, source):        self._source = source    def set_destination(self, destination):        self._destination = destination    def go(self):        print("Going from %s to %s"%(self._source, self._destination))# Instantiationtrain = Train()train.set_source("Kadapa")train.set_destination("Chennai")train.go()

But Javascript doesn't have such feature in olden days before ES6. So developers came up with a pattern like below using the power of closures in the JS.

Example in Javascript - implementation 1:

// class-ish declarationfunction Train() {  var _source = ""  var _desination = ""  function set_source(source) {    _source = source  }  function set_destination(destination) {    _desination = destination  }  function go() {    console.log(`Going from ${this._source} to ${this._desination}`)  }  return {      set_source: set_source,      set_destination: set_destination,      go: go    }}// Instantiationtrain = Train()train.set_source("Kadapa")train.set_destination("Chennai")train.go()

This gives same feel like other programing languages. But it is not so efficent because every intance of Train will hold entire copy of all functions and variables.

So below code is the ideal implementation developers follow in JS using the power of prototypes.

Example in Javascript - implementation 2:

// class-ish declarationfunction Train() {  this._source = ""  this._desination = ""}Train.prototype.set_source = function(source) {  this._source = source}Train.prototype.set_destination =  function(destination) {  this._desination = destination}Train.prototype.go =  function() {  console.log(`Going from ${this._source} to ${this._desination}`)}// Instantiationtrain = new Train()train.set_source("Kadapa")train.set_destination("Chennai")train.go()

Above code will use benifits we are getting from prototypes and function constructors in JS. So, all Train instances will have a different copy of members(source, destination) but single copy of methods for all instances.

Since we need to do this technique a lot to create a class like objects. JS core team added a class reserved keyword to the JS to make our life easier.
Under the hood it does the same thing as our prototype code. It is just syntactic sugar in javascript.

My beloved class implementation

// class declarationclass Train {  constructor(){    this._source = ""    this._desination = ""  }  set_source(source) {    this._source = source  }  set_destination(destination) {    this._desination = destination  }  go() {    console.log(`Going from ${this._source} to ${this._desination}`)  }}// Instantiationtrain = new Train()train.set_source("Kadapa")train.set_destination("Chennai")train.go()

Original Link: https://dev.to/pavancse17/history-of-classes-in-js-21f4

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To