Six ways to define JS classes

In front-end development, it is often necessary to define JS classes. So in JavaScript, there are several ways to define a class, and what are the differences? In this paper, the six-way description of the JS definition class is as follows (case description):

1. Factory mode

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 its properties and methods are given. You can use this function to create 2 objects of exactly the same property.

Of course, you can revise this way by passing parameters to it.

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"

It is now possible to get objects with different values by passing different arguments to the function.

In the previous example, each time the function car () is called, The Showcolor () is created, 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, you then point the function's properties to the method.

function Showcolor () {

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

But it doesn't look like a method of a function.

2. How to construct a function

The constructor is as simple as the factory approach, as follows:

function Car (Color,door) {
This.color = color;
This.doors = door;
This.showcolor = function () {
Alert (This.color)
};
}
var car1 = new Car ("Red", 4);
var car2 = new Car ("Blue", 4);

You can see that the constructor does not create an object inside the function, and is used with the This keyword. Because the object was created when the constructor was called, the object property can only be accessed with this within the function.

Now use new to create the object, it looks like that! But it's the same way as the factory. Each call will create its own method for the object.

3. Prototype mode

This method takes advantage of the prototype property of the object. First, the class name is created with an empty function, and all properties and methods are given the prototype property.

function Car () {
}
Car.prototype.color = "Red";
Car.prototype.doors = 4;
Car.prototype.showColor = function () {
alert (This.color);
}
var car1 = new Car ();
var car2 = new Car ();

In this code, an empty function is defined first, and then the properties of the object are defined by the prototype property. When the function is called, all properties of the prototype are immediately assigned to the object to be created, and all of the function's objects hold pointers to Showcolor (), all of which appear to belong to the same object syntactically.

However, this function has no parameters and cannot be initialized by passing parameters, it must be created before the property's default value can be changed.

One of the most serious problems with prototyping is that when an attribute points to an object, an array.

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

Because of the reference value of the array, the car's two objects point to the same number of groups, so when you add a value in Car1, you can see it in car2.

A union is a constructor/prototype way to create objects like other programming languages, a method of defining an object using a constructor that defines the object's non-function properties.

function Car (Color,door) {
This.color = color;
This.doors = door;
This.arr = new Array ("AA", "BB");
}
Car.prototype.showColor = function () {
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

5. Dynamic Prototyping Mode

Dynamic prototypes are similar in the same way as mixed constructors/prototypes. The only difference is where the object method is given.

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 method uses a flag to determine whether the prototype has been given a method. This guarantees that the method will only be created once

6. Mixed Factory mode

Its objective is to create a dummy constructor that returns only a new instance of another object.

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

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

These are all the methods of creating objects. The most widely used is the hybrid constructor/prototype approach, and the dynamic prototyping approach is also popular. Functionally equivalent to the constructor/prototype approach.

Six ways to define JS classes