JavaScript Object-Oriented Programming (2) Define Classes

This article continues with the previous articleJavaScript Object-Oriented Programming (1) Basics。
As mentioned in the previous article, JavaScript does not have the concept of a class, and needs to implement the definition of a class through functions. Let's first illustrate with an example:

The definition of function is actually equivalent to the constructor of the class. The last two sentences are to create an instance of this class. First analyze the first sentence: var obj1 = new myClass(); When using new to create an instance of the class, the interpreter will first create an empty object. Then run this myClass function and point this pointer to an instance of this class. When encountering = id; and = name; and = function(){...}, these two properties will be created, and this method will be used, and the definition of the value of the variable id and name value will be assigned to these two properties and this function object (shwoMessage). This process is equivalent to initializing this object, similar to the constructor in C#. Finally new returns this object. Let’s look at the second sentence: var obj2 = new myClass(); The execution process is the same as the previous sentence code, that is, create an empty object, and then execute the function myClass to define two properties and a method.
From the above analysis, we can see that the above method of implementing classes is to define the attribute method of the class in the definition of a function. There are disadvantages. If you need to create two or more instances of this class, the above is two, and these properties will be created repeatedly.
So how to avoid this situation? The use of prototype was also mentioned in the previous article. prototype is a prototype like its name. Each function has a child object prototype, which actually represents a collection of members of this function object. Since we use function to implement the class here, it can be said that prototype is actually a collection of members of the class. Prototype defined properties and methods are executed before the function construct is executed, so before new object, the prototype members have been executed. Let’s take a look at an example:

The structure of the class is still the same as in the previous example, except that the prototype is implemented here. Let’s look at the last two sentences first. As mentioned earlier, prototype is executed before the function construct, that is, before the var obj1 = new myClass();, this class already has an ID, Name attribute and showMessage method. The execution process when executors say it is as follows. Pay attention to the previous example: First, create an empty object and point this pointer to this object. Then all members of the function's prototype object are assigned to this object (note that these members are not created again). Then execute the function body. Finally new returns this object. When executing the next sentence: This process is also performed, and these members are not created repeatedly.
The above code is just an example. In actual projects, it may appear that there are a large number of members in the class, and it may also require the creation of a large number of instances. This is the prototype and will show its superiority. In addition, the above code uses brace syntax to define the members of the prototype, so that the code looks clearer. This is a more recommended design pattern. Of course, among many projects, you may find better models. We also hope that there will be a more optimized JavaScript programming model to continue to innovate. We also hope that as time goes by, all mainstream browsers will also have standard and unified JavaScript parsing.
As mentioned above, the member defined by the prototype occurs before the constructor. It can be proved that in the above example, the constructor is empty. Add an alert(); to the constructor. When executing to var obj1 = new myClass();, a dialog box will be popped up, showing the correct attribute value.
After writing this passage, I thanked many of my brothers for comments and gained a lot. The above example is further discussed, as follows:

Here, a reference type is defined in myClass, whose type is a subClass class we customized, and there is a Name attribute in this subclass. Since the prototype object is shared, according to our analysis above: when executing var obj1 = new myClass();, the members of the myClass prototype will be copied to this obj1 instance. But here SubObj is a reference type. When executing var obj2 = new myClass();, the ID and Name members in the prototype will be copied to obj2. However, the SubObj attribute will not be copied in the past, but refers to SubObj in the prototype. Therefore, because the value modified in the previous sentence, when using new to generate the obj2 instance, the modified value is referenced.
Therefore, when defining a class with prototype, you still need to define the attributes in the constructor and define the method on the prototype of the constructor. as follows:

I will continue to write about private members, shared members and static members, class inheritance, abstract classes, virtual methods, class reflection and other implementation methods in the future. However, I think it is important to say that what I plan to write is the basic implementation of object-oriented JavaScript. If you need in-depth learning, it is recommended to refer to Brother Li Zhan’s “Nanlu Model”.