Javascript Object-Oriented Programming Learning (BASICS)

----> What are classes and objects?
This must be understood before all object-oriented programming.
The so-called class: In simple terms, it is a template. Professional is a collection of things of a certain nature. For example, a person is a class, a car is a class, and so on.
The so-called object is the specific implementation of the class. As mentioned above, a person is a class, and a specific person is an object, such as John.

The object is the result of class instantiation. In JavaScript, The New Keyword is used to instantiate a class and generate an object.
Example:
Function people () {// a function in Javascript is also a class. Here we create an empty class people
}

VaR zhangsan = new people; // instantiate and generate an object.

----> An example of a specific image
/* --> Simplest class:
* People class
* Attribute: gender, age, name
* Method: Speak
*/
Function people (name, sex, age ){
This. Name = Name;
This. Sex = sex;
This. Age = age;
This. Say = function (){
Return "my name is" + this. Name;
}
}

Use Time:
VaR zhangsan = new people;
Alert (zhangsan. say ());
Var lisi = new people;
Alert (lizi. say ());
Note:
This keyword is used above. this always points to the current object. In the above example, zhangsan. this. name, here this is the current object zhangsan. lisi. say is to point to the current object lisi
The object has attributes. The above names, sex, and age are the attributes of the object. We can access these attributes, such as lisi. name, zhangsan. age.
The object also has a method. For example, the above say. method is implemented through the constructor. for use, as shown above, use lisi. say (), zhangsan. say ()

Of course, we can also add new attributes and methods for the object after instantiating the object. For example:
Zhangsan. girlfriend = "Lili ";
Zhangsan. doing = function (){
Return "I am eating ";
}

----> Similarities and differences between JavaScript classes/objects and other object-oriented languages
Similarities: the idea of object-oriented programming is the same. All specific things in the world can be seen as objects, and the collections of these things can be considered as classes. what we need to do is to construct the classes we need, and convert the instances into the objects we need to work for us.
Differences: Other Object-Oriented Programming Languages care about the following for classes/objects:
1. Scope: Public, private, protected, static. javascript has only one scope: Public scope.
2. Features: inheritance, polymorphism. javascript does not support polymorphism. The Inheritance content will be introduced in the article "inheritance of javascript objects ".

----> How to Build JavaScript classes/objects
First, you can define the following types:
1. Factory method
2. constructor Method
3. Prototype
4. Mixed Constructors/prototype
5. Dynamic Prototype Method
6. Hybrid Factory

Details:
A. Factory method:
The so-called factory method refers to first creating an object and then adding attributes and methods to the object.
Eg.1
VaR zhangsan = new object; // create an object
Zhangsan. Name = "zhangsan"; // Add attributes to an object
Zhangsan. say = function () {// Add a method to the object
Alert ("My name is James ");
}
The example above in eg.2 is not encapsulated. We can use function encapsulation to achieve multiple exploitation.
Function people (){
Var p_object = new Object;
P_object.name = "James ";
P_object.say = function (){
Alert ("My name is James ");
}
Return p_object; // return object
}
Var zhangsan = people;
Var lisi = people;
The preceding zhangsan and lisi objects have identical attributes and methods, both of which are called "Zhang San" (name attribute). They all say "I'm Zhang San" (say () method)
Eg.3 improve eg.2 by passing Parameters
Function people (name ){
VaR p_object = new object;
P_object.name = Name;
P_object.say = function (){
Alert ("My name is" + this. Name );
}
Return p_object; // return object
}
Var zhangsan = people ("James ");
Var lisi = people ("Li Si ");
Summary:
The factory method always creates an object first, and then adds the required attributes and methods to the object. however, this method is not very advantageous for encapsulation and multiple utility, which leads to the disrecommendation of the object constructor.
Use the factory method to always create independent function versions for each object.
This type of method uses encapsulation and then calls the new object instead of using new to create the object.

B. constructor method:
The so-called constructor method is like the example I gave "An example of a specific image", that is, the constructor method. the difference between it and the factory method is that it no longer creates an object in the function. instead, use the this keyword to point to the current object.
The example of the constructor is no longer given.
Like the factory method, constructor will generate multiple functions to create independent function versions for each version of the object.

C. Prototype
Prototype is used to inherit attributes and methods.
Eg.1
Function people (){
}

People. prototype. name = "James ";
People. prototype. say = function (){
Alert ("My name is" + this. name );
};

Var zhangsan = new people ();
Var lisi = new people ();
The prototype method cannot pass the parameter initialization attribute value through the constructor, because all attributes and methods are added through prototype.

D. Mixed Constructors/prototype
The constructor is used for object attributes.
Prototype is used for object methods.
Eg.1
Function people (name ){
This. name = name;
}
People. prototype. say = function (){
Return "my name is" + this. name;
};

Var zhangsan = new people ("James ");
Document. write (zhangsan. say ());

Eg.2 we can also write prototype into the class to implement visual encapsulation.
Function people (name ){
This. name = name;
People. Prototype. Say = function (){
Return "my name is" + this. Name;
};
}

VaR zhangsan = new people ("James ");
Document. Write (zhangsan. Say ());

Summary: This method of constructing classes/objects is recommended.

E. Dynamic Prototype
This is an improved method (providing a more friendly encoding style) for mixed Constructors/prototype methods, and their functions are equivalent.
Eg.1
Function people (name ){
This. name = name;
If (typeof people. _ initialized = "undefined "){
People. prototype. say = function (){
Return "my name is" + this. name;
};
People. _ initialized = true;
}
}
Var zhangsan = new people ("James ");
Document. write (zhangsan. say ());
VaR Lisi = new people ("Li Si ");
Document. Write (Lisi. Say ());
The purpose of this process is to create an object method before the next use.
For the above reason, the dynamic prototype is also a common method for creating classes/objects in JavaScript.

F. Hybrid factory Mode
The hybrid factory method is almost the same as the factory method. it also constructs an object first, and then adds attributes and methods to the object. the difference is that the new keyword is still used when an object is generated in the hybrid factory mode.
Eg.1
Function people (){
Var p_object = new Object;
P_object.name = "James ";
P_object.say = function (){
Alert ("My name is James ");
}
Return p_object; // return object
}
VaR zhangsan = new people;
VaR Lisi = new people;
Zhangsan. Say ();
Lisi. Say ();
The hybrid factory method is the same as the factory method and the classic method (constructor and prototype), which may cause problems and is not recommended.

Summary of various construction classes/objects:
Generally, we use a hybrid constructor/prototype, that is, the attribute uses the constructor method, and the method uses the prototype method. Of course, we can use the dynamic prototype method to enhance the feature.
The above two methods are recommended.


----> Other prototype functions
1. Add a new method to the object (including local objects)
For example, you may need to add a tohexstring method to an array object. You can do this:
Array. Prototype. tohexstring = function (){
// Code here
}
2. Redefinition Method
The essence is to point the method to a new function.
Array. Prototype. tohexstring = function (){
// Other code href
}