Six Methods of JS definition classes are described in detail, and six methods of js definition are described in detail.

Six Methods of JS definition classes are described in detail, and six methods of js definition are described in detail.

In front-end development, you often need to define JS classes. In JavaScript, there are several ways to define classes. What are the differences? In this article, the method in section 6 of the JS definition class is described 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 attributes and methods are assigned to it. You can use this function to create two objects with identical attributes.

Of course, you can change this method 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 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.

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:

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 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.

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 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.

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,ccalert(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.

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,ccalert(car2.arr); //output:aa,bb

5. 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.

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.

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.

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.

The preceding six methods of JS definition are described in detail in the following section. I hope to give you a reference and support for the customer's house.