Method Summarization for defining classes in javascript _ basic knowledge

This article mainly introduces the summary of methods for defining classes in javascript. You can refer to the following methods for defining classes in javascript:

1. Factory Mode

The Code is as follows:

Function Car (){
Var ocar = new Object;
Ocar. color = "blue ";
Ocar. doors = 4;
Ocar. showColor = function (){
Document. write (this. color)
};
Return ocar;
}
Var car1 = Car ();
Var car2 = Car ();

When this function is called, a new object is created and all attributes and methods are assigned to it. You can use this function to create two objects with identical attributes. Of course, my sister can change this method by passing parameters to it.

The Code is as follows:

Function Car (color, door ){
Var ocar = new Object;
Ocar. color = color;
Ocar. doors = door;
Ocar. showColor = function (){
Document. write (this. color)
};
Return ocar;
}
Var car1 = Car ("red", 4 );
Var car2 = Car ("blue", 4 );
Car1.showColor () // output: "red"
Car2.showColor () // output: "blue"

Now you can pass different parameters to the function to get objects with different values.
In the previous example, showcolor () is created every time the function Car () is called, which means that each object has its own showcolor () method.

But in fact, each object bucket shares the same function.
Although you can define a method outside a function, and then point the function property to this method.

The Code is as follows:

Function showColor (){
Alert (this. color );
}
Function Car (){
Var ocar = new Object ();
Ocar. color = color;
Ocar. doors = door;
Ocar. showColor = showColor;
Return ocar;
}

However, this does not seem like a function method.
2. constructor Method
The constructor method is as simple as the factory method, as shown below:

The Code is as follows:

Function Car (color, door)

You can see that the constructor method does not create an object inside the function. this keyword is used. Because the object has been created when the constructor is called, this can only be used within the function to access object attributes.
Now we use new to create an object. It looks like this is the case! But it is the same as the factory method. Each call creates its own method for the object.

3. Prototype

This method utilizes the prototype attribute of the object. First, use an empty function to create a class name. Then, all attributes and methods are assigned the prototype attribute.

The Code is as follows:

Function Car ()

In this Code, an empty function is defined first, and then the properties of the object are defined through the prototype attribute. When this function is called, all attributes of the prototype are immediately assigned to the object to be created. All objects of this function are stored as pointers to showColor, the syntax seems to belong to the same object.
However, this function does not have a parameter and cannot be initialized by passing a parameter. You must create an object before changing the default value of the property.
A serious problem with the prototype method is that when the attribute points to an object, such as an array.

The Code is as follows:

Function Car (){
}
Car. prototype. color = "red ";
Car. prototype. doors = 4;
Car. prototype. arr = new Array ("a", "B ");
Car. prototype. showColor = function (){
Alert (this. color );
}
Var car1 = new Car ();
Var car2 = new Car ();
Car1.arr. push ("cc ");
Alert (car1.arr); // output: aa, bb, cc
Alert (car2.arr); // output: aa, bb, cc

Here, because of the reference value of the array, the two objects of Car point to the same array, so when the value is added in car1, it can be seen in car2.
Consortium allows you to create objects in the same way as other programming languages by using constructors or prototypes. Consortium defines non-functional attributes of objects by using constructors and defines object methods by prototype.

The Code is as follows:

Function Car (color, door ){
This. color = color;
This. doors = door;
This. arr = new Array ("aa", "bb ");
}
Car. prototype. showColor (){
Alert (this. color );
}
Var car1 = new Car ("red", 4 );
Var car2 = new Car ("blue", 4 );
Car1.arr. push ("cc ");
Alert (car1.arr); // output: aa, bb, cc
Alert (car2.arr); // output: aa, bb

4. Dynamic Prototype

The dynamic prototype method is similar to the hybrid constructor/prototype method. The only difference is to assign the location of the object method.

The Code is as follows:

Function Car (color, door ){
This. color = color;
This. doors = door;
This. arr = new Array ("aa", "bb ");
If (typeof Car. _ initialized = "undefined "){
Car. prototype. showColor = function (){
Alert (this. color );
};
Car. _ initialized = true;
}
}

The dynamic prototype uses a flag to determine whether a method has been assigned to the prototype. This ensures that this method is created only once.

6. Hybrid Factory

Its target teacher creates a false constructor and returns only new instances of another object.

The Code is as follows:

Function Car (){
Var ocar = new Object ();
Ocar. color = "red ";
Ocar. doors = 4;
Ocar. showColor = function (){
Alert (this. color)
};
Return ocar;
}

Unlike the factory method, this method uses the new operator.

PS (personal understanding ):

1) the class members (methods or attributes) defined by prototype are shared by each class object. Generally, the member attributes are not defined. An object modifies the attribute values and all objects are modified;

2) the class has the prototype attribute, and the class object does not;

3) every time a new class object or a direct call class (in the following factory method form) is executed, the statements of the defined class (function) will be executed once (this can be avoided in the singleton mode );

4) the class is a function type, and the class object is an object type. Only the function type is prototype;

5) methods defined by prototype cannot access private variables of the class (local variables defined by the class), but they can use the member attributes and member methods of the this class (variables and methods defined by this );

6) method of defining classes:

A. Factory method (Object)

B. Inheritance Method (prototype)

C. constructor mode (this)

D. hybrid mode

7) [question] Why can attributes defined by prototype be changed by any object? The attribute defined by the constructor method only belongs to the object and does not affect the attribute values of other objects?

The above are all object creation methods. Currently, hybrid Constructors/prototypes are the most widely used methods. In addition, dynamic prototypes are also popular. The function is equivalent to the constructor/prototype.