JavaScript Classes and Prototypes
Introduction
The previous post about Javascript was about the basic concepts of Javascript and this post is a continuation of that post. All things in Javascript are related to some object. This post is mainly focusing on the coding part of Javascript functions, prototypes, classes.
Functions and Classes
Variables
Javascript variables can be declared in three ways. They are var, let, and const. Each one of them is used in different situations. The below table demonstrates some characteristics of these three variables.
Hoisting: Simply when we call a variable before it is declared, it generates some error. But in the hoisting, all the declarations are moved to the top of the scope and will not generate any error.
How to create JSON type object?
E.g:-
The person variable in the image is a JSON-type object. We can have several attributes in person object like name, occupation, and also some methods like getName function.
Window and Global Scope
The window interface represents the DOM(Document Object Model) and it is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window.
This Keyword
In this example first, this keyword in the printName() function refers to the global scope and prints 'Toyota' and the second time execution this keyword refers to the car object.
In this example first, this keyword in the printName() function refers to the global scope and prints 'Toyota' and the second time execution this keyword refers to the global object. In this example, the execute() refers to the global scope. Both of the times prints 'Toyota' because the context is changing with the execution environment. There is a method to bind the contexts.
Bind method
Simple object creation from another object
According to the example, the jane object is created using create() method. We can easily create objects(copy of) from another object using this method.
Equal operation (===) is for comparing the value and the type of both the left side and right side and the (==) is for comparing only the values of both sides. In the example, the first comparison( person.getName() === jane.getName() ) is false because both methods return different values. The second comparison( person.getName === jane.getName ) demonstrates an important point of prototyping. This comparison returns true because both are pointing to the same method.
Classes and Prototypes
According to the ES6 specification, the class keyword can be used to create a class. But another way to define a class is function.
What is a class?. In this example, the Person class created using a function. But it can also be declared using the class keyword. The john is created using the 'new' keyword and it is used to create an object from a class. Output has the getName() method inside the prototype(_proto_) because in the 5th line the getName() method is created inside the prototype. As a best practice and reduce the weight of the object it is better to create methods inside the prototype.
But the getName() method can be declared in the Person function directly. After declared inside the class the object is heavier. According to this picture, the getName() method is in the class and not inside the prototype. Usually, this type of declaration is not a good practice.
"Prototypes are the mechanism by which JavaScript objects inherit features from one another."
I think the prototype is a copy of an object class(hidden) and it is a function-type object.
According to line 22, the output is true because john and Person are pointing to the same prototype object. Then the next is false because the getName() methods are in object level and the two objects have their own methods.
Inheritance
What is inheritance between classes?. In JavaScript inheritance works in a different way.
E.g:-
The Person class is the parent class and the Employee class is the child class. The name of the person's class is inherited by the employee class using the call method in line 20. The prototype of the Employee class is pointing to a copy of the person's prototype(line 24) and the constructor of the employee class(line 25) is pointing to the Employee class(not to the person class:- by default, it is pointing to the person class).
The Employee's prototype is pointing to the copy of the Person object's prototype and because of that, this statement(line 38) is false even without the getOccupation() method.
This is not the only method and there are other methods of inheritance working in JavaScript. According to the ES6 specification, extends keyword is used to declare a child class.