In front-end development, it is often necessary to define JS classes. So in JavaScript, there are several ways to define classes. What are they? In this paper, the six ways of defining JS classes are described as follows (case description):

1. Factory Way

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 attributes and methods are assigned to it. Using this function, two objects with identical attributes can be created.

Of course, it can be modified 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"

Now you can get objects with different values by passing different parameters to the function.

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 a method can be defined outside of a function, it can then be pointed at by pointing the attributes of the function to that method.

function showColor(){
    alert(this.color);
}
function Car(){
    var ocar = new Object();
    ocar.color = color;
    ocar.doors = door;
    ocar.showColor = showColor;
    return ocar;
}

But that doesn't seem like a functional approach.

2. Constructor mode

The constructor approach 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 way does not create objects inside the function, using this keyword. Because the object has been created when the constructor is called, the object property can only be accessed by this within the function.

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

3. Prototype

This approach takes advantage of the prototype attribute of the object. First, class names are created with empty functions, and then all attributes and methods are given prototype attributes.

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, we first define an empty function, and then define the properties of the object through the prototype attribute. When the function is called, all attributes of the prototype are immediately assigned to the object to be created. All objects of the function are stored with pointers to showColor(), which grammatically seem to belong to the same object.

However, this function has no parameters and can not initialize properties by passing parameters. It must be created before changing the default values of properties.

A serious problem with prototyping is when attributes point to objects, such as arrays.

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, both objects of Car point to the same array, so when adding values to car1, you can also see them in car2.

Joint is a way to create objects in the constructor/prototype way, just like other programming languages. It is a way to define non-functional attributes of objects in the constructor and objects in the prototype way.

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

5. Dynamic prototyping

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

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;
    }
}

Dynamic prototyping uses a flag to determine whether a method has been given to the prototype. This ensures that the method is created only once

6. Mixed plant mode

Its purporter creates a pseudo-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 approach uses the new operator.

These are all the methods of creating objects. At present, hybrid constructor/prototype is the most widely used method. In addition, dynamic prototyping is also popular. Functionally equivalent to the constructor/prototype approach.

The above six ways of defining JS classes are all the contents shared by the editor.