Class and constructor Function in JavaScript

In Javascript, if you want to instantiate an instance object, we will start with constructing a constructor and then using the new keyword.

That template, maybe a constructor function (old way) or a class (from ECMAScript 2015).

For example:

Method 1 : Use the constructor function:

Method 2 : Use Class

But sometimes, I also come across another way:

Method 3 :

So what are the 3 ways to do this differently and differently? How to do the most convenient and standard?

In response, we understand what happened when using the new keyword

When using new to create an instance object, the following happens in turn:

1. Create a new, empty Object
2. Point the [[Prototype]] (aka .__proto__ ) .__proto__ of this empty Object to the .prototype attribute of the constructor function
3. Implement the constructor function, with this value assigned as the empty Object just created
4. At the end of the function, return the newly created Object if the constructor function does not return a non-null Object. If it does, it will return the non-null Object

Try verifying by performing the steps above to initialize an instance object

The above procedure shows that: instance object inherits methods from .prototype of constructor function or class. And the properties will be obtained by implementing the constructor function with the value of this is the instance object .

This is the point that makes the difference between Method 1 and Method 3 . In Method 3 , methods are added directly to the instance object. Therefore, if you change the .prototype of the constructor function, the methods directly added will not change.

So is Method 1 different from Method 2 ? The answer is no different than the writing syntax. Instance objects created using Method 1 or Method 2 will inherit methods from the original .prototype , with properties (and the value of each property) obtained by executing the constructor function.

Easy to see in Method 2 , there are no words related to .prototype. But essentially all the methods declared in a class have been added to the class’s .prototype. Using class syntax will be more convenient, neat and easier to understand, but it will also be less explicit.

However, the problem has not stopped there. The this keyword and the appearance of the arrow function make things a bit more complicated.

Try rewriting method declarations in Method 1 and Method 3 , using the arrow function as follows:

Method 1

Method 3

Why is Method 3 working properly and Method 1 is not?

The reason is because the arrow function does not define this by itself, but will go back and find the value of this at the time the arrow function is declared. With Method 1 , at the time of declaration, this is global or window , so this.name is undefined . Whereas with Method 3 , the main declaration time is Step 3 when the new keyword works, where this is assigned the main value as object milu already. Therefore way 3 will work properly.

As for the class declaration ( Method 2 ), there is no need to care about this problem, because it does not use the arrow function .

Conclusion: class syntax is much more convenient when object-oriented programming in Javascript. If you still decide to use the old syntax, need to understand the principle of inheritance by prototype and how to use this .

Refer:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/new
https://www.taniarascia.com/understanding-classes-in-javascript/