Methods of defining classes in JavaScript Summary _ Basics

There are a number of ways to define classes in JS:

1. Factory mode

Copy Code code 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 ();

Calling this function creates a new object and assigns all of its properties and methods. Use this function to create objects with exactly the same 2 properties. Of course, my sister can pass the parameters to it to the revision of this way.

Copy Code code 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"

You can now get objects with different values by passing different parameters to the function.
In the previous example, every time you call the function car (), you create Showcolor (), meaning 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 of a function, then point to the method by pointing the function's properties.

Copy Code code as follows:

function Showcolor () {
alert (This.color);
}
function car () {
var ocar = new Object ();
Ocar.color = color;
Ocar.doors = door;
Ocar.showcolor = Showcolor;
return ocar;
}

But this does not look like a function method.
2. Constructor mode
The constructor method is as simple as the factory approach, as follows:

Copy Code code as follows:

function car (color,door)

You can see that the constructor does not create an object inside the function, it is using the This keyword. Because the object was created when the constructor was invoked, the object property can only be accessed within the function using this.
Now use new to create objects that look like that! But it works the same way as the factory. Each call creates its own method for the object.

3. Prototype mode

This method utilizes the prototype property of the object. The class name is first created with an empty function, and then all the properties and methods are assigned to the prototype property.

Copy Code code as follows:

function car ()

In this code, you first define an empty function and then define the object's properties by prototype the property. When this function is invoked, all the properties of the stereotype are immediately given to the object to be created, and all objects of that function hold a pointer to Showcolor (), which appears to belong to the same object syntactically.
However, this function has no parameters and cannot initialize properties by passing arguments, and must be created before the object can be changed to the default value of the property.
A serious problem with the prototype approach is that when the attribute is pointing to an object, an array is available.

Copy Code code 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, two objects in the car point to the same number, so when you add a value in Car1, you can see it in the car2.
A union is a constructor/prototype way to create objects, like other programming languages, by using constructors to define the object's non function properties, and to define the object's methods in a prototype way.

Copy Code code 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 Prototyping mode

Dynamic prototypes are similar to the hybrid constructor/prototype approach. The only difference is where the object method is given.

Copy Code code 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 prototyping approach is to use a flag to determine whether a method has been given to the prototype. This ensures that the method is created only once

6. Mixed Factory mode

Its creator creates a fake constructor and returns only a new instance of another object.

Copy Code code as follows:

function car () {
var ocar = new Object ();
Ocar.color = "Red";
Ocar.doors = 4;
Ocar.showcolor = function () {
Alert (This.color)
};
return ocar;
}

In contrast to the factory approach, the new operator is used in this way.

PS (Personal understanding):

1 The class is defined by the prototype member (method or attribute), is common to each class object, is generally not used to define member properties, an object modifies the attribute value, all objects are modified;

2 class has prototype attribute, class object does not have;

3 each time a new class object or a direct call class (The following factory method form), the statement that defines the class (function) is executed once (the case can be avoided by a single case pattern);

4 class is a function type, class object is object type, only function type prototype attribute;

5 The method defined by prototype accesses the private variable of the class (the local variable defined by the class), but can access the member properties and member methods of the class (this defines the variables and methods).

6 Define the way the class is:

A. Factory mode (Object)

B. Mode of succession (prototype)

C. Constructor method (this)

D. Blending mode

7 [question] Why can the properties defined by prototype be changed by any object? The properties defined by the constructor are only objects and do not affect the property values of other objects.

The above is the whole method of creating objects. The most widely used is the hybrid constructor/prototyping approach, in addition, dynamic prototyping is also popular. Functionally equivalent to the constructor/prototype approach.