{"id":4716,"date":"2018-05-22T14:27:47","date_gmt":"2018-05-22T14:27:47","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=1204"},"modified":"2018-05-22T14:27:47","modified_gmt":"2018-05-22T14:27:47","slug":"learning-javascript-classes","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/learning-javascript-classes\/","title":{"rendered":"Learning JavaScript Classes"},"content":{"rendered":"

Note<\/strong>: This post is work-in-progress learning-note and still in active development and updated regularly.<\/p>\n

JavaScript is a Object Oriented language. Unlike other language (eg. C++, Java, Python etc) JS is not class-based nevertheless\u00a0 Objects in JavaScript are considered everything. In ES2015 (ES6), a prototype-based class<\/code> keyword was introduced. In this learning note we will deep dive into JS class<\/code>, its common uses with a focus on its relation to prototypes.<\/p>\n

Under the hood, ES6 classes are not something that is radically new: They mainly provide more convenient syntax to create old-school constructor functions.\u00a0 Axel Rauschmayer<\/a><\/cite><\/p><\/blockquote>\n

JavaScript classes<\/a> are “special function” which can be defined<\/a> as class expression<\/a> or class declaration<\/a> similar to to defining functions.<\/a><\/p>\n

Function vs Class<\/h3>\n

In order to understand JS classes are special functions, lets create a simple Vehicle<\/code> function using both function()<\/code> syntax and class<\/code> syntax below and examine differences between the two methods:<\/p>\n

\/\/ Initialize Vehicle function\nfunction Vehicle(make, model) {     \/\/function declaration\n  this.make= make;                  \/\/ define properties\n  this.model= model;\n}\n\/\/method declaration\nVehicle.prototype.reminder = function() {  \/\/method declaration\n  console.log(this.make);\n}\n\/\/create myVehicle instance\nlet myVehicle = new Vehicle("Ford"); \/\/create myVehicle instance (new' keyword)\nmyVehicle.reminder();                \/\/Output => Ford<\/code><\/pre>\n
In the example above, we created a Vehicle()<\/code> function (line 2)with two properties (make<\/code>, model<\/code>). Using object.prototype._<\/code> we created a reminder()<\/code> method (line 7). Lastly, myVehicle<\/code> object instance was created (line 11) using new<\/code> keyword and expected output was displayed (line 12).<\/p>\n
Prototype ( [[Prototype]]<\/code> ) of vehicle()<\/code> function can be accessed using the Object.getPrototypeOf()<\/code> method<\/a> as follows:<\/p>\n
\/\/access prototype of Vehicle function\nObject.getPrototypeOf(Vehicle);\n\/\/\u0192 () { [native code] }\n\nObject.getPrototypeOf(myVehicle);\n\/\/{reminder: \u0192, constructor: \u0192}<\/code><\/pre>\n
With prototype-based language, any function can become a constructor instance using the new<\/code> keyword (line 18).<\/p>\n
In the example below, lets initialize the above Vehicle<\/code> object with same properties and methods using class<\/code> syntax.<\/p>\n
\/\/ initialize Vehicle class\nclass Vehicle {               \/\/ class declaration\n  constructor(make, model) {  \/\/constructor declaration\n    this.make = make;         \/\/ instance variables\n    this.model= model;\n  }\n\/\/ method declaration\n  reminder() {               \/\/ method declaration\n    console.log(this.make);\n  }\n}\n\/\/Create myVehicle instance\nlet myVehicle = new Vehicle("Ford"); \/\/ object instance ('new' keyword)\nmyVehicle.reminder();                \/\/OUTPUT => Ford<\/code><\/pre>\n
Lets also look at the vehicle()<\/code> object created with class<\/code> construct using the same Object.getPrototypeOf()<\/code> method<\/a>:<\/p>\n
\/\/access prototype of Vehicle class\nObject.getPrototypeOf(Vehicle);\n\/\/\u0192 () { [native code] }\n\nObject.getPrototypeOf(myVehicle);\n\/\/{constructor: \u0192, reminder: \u0192}<\/code><\/pre>\n
Similar to the function, object instances created with new<\/code> keyword also become a constructor instance as shown in the example above.<\/p>\n
From the above two examples, we got the same output demonstrating that JS class are functions, but creating method with class<\/code> keyword is much simpler (lines 8-10) and easier to read.<\/p>\n
Defining Classes<\/h3>\n
Before defining objects using class<\/code> keyword, lets revisit some terminologies<\/strong> that are used in JS classes.<\/p>\n