An Interest In:
Web News this Week
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
- March 12, 2024
- March 11, 2024
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To