Summary of several ways to define classes in JavaScript_javascript skills

When we think of object-oriented, we can think of classes, objects, encapsulation, inheritance, and polymorphism. The description in the book "javaScript Advanced Programming" (People's Posts and Telecommunications Publishing House, translated by Cao Li and Zhang Xin. The English name is: Professional JavaScript for Web Developers) is relatively detailed. Let's look at the various ways to define classes in JavaScript.

1． Factory method

We must master creating our own classes and objects in javaScript. We all know that the properties of objects in javaScript can be dynamically defined after the object is created, such as the following code:

Copy code The code is as follows:

It is easy for us to use the oCar object, but we just want to create multiple Cars Example. We can use a function to encapsulate the above code to achieve this:

Copy the code The code is as follows:

By the way, the default member properties of JavaScript objects are all public. This approach is called the factory approach, where we create factories that create and return objects of a specific type.

This is a bit interesting, but in object-oriented the method we often use to create objects is:

Car car=new Car();

Using the new keyword has been deeply rooted in people's hearts, so it always feels awkward when we use the above method to define, and it creates new properties and functions every time it is called, which is not functionally practical. Let's take a look at the formal definition of the constructor class.

2． Constructor

This method looks a bit like a factory function. The specific performance is as follows:

Copy code The code is as follows:

It seems that the effect is obvious, there is a difference. It feels a little interesting. Creating objects inside the constructor uses the this keyword, and using the new operator to create objects feels very familiar. But there is also a problem: every time a new object is created, all attributes are created, including the creation of functions, which means that multiple objects are completely independent. The purpose of defining a class is to share methods and data, but the car1 object and the car2 object are both For independent properties and functions, at least we should share methods. This is the advantage of the prototype approach.

3． Prototype method

Using the prototype attribute of the object, you can see the prototype on which the creation of a new object depends. The method is as follows:

Copy the code The code is as follows:

4. Mixed Constructor/Prototype Pattern

Using constructors and prototypes together, it is very convenient to define classes.

Copy code

The code is as follows://Definition function Car(color,doors) {

this.color=color;

this.doors=doors;
this.drivers=new Array("Tom ","Jerry");
}

Car.prototype.showColor=function(){
alert(this.color);
}

//Call: var car1=new Car('red', 4);

var car2=new Car('blue',4);

car1.showColor();
car2.showColor();

alert(car1. drivers);
car1.drivers.push("stephen");
alert(car1.drivers); //Result: Tom, Jerry, stephen
alert(car2.drivers); //Result: Tom,Jerry
alert(car1 instanceof Car);




This method is to define the attributes inside and the methods outside using prototype to define. Solved the problem with the third method.

This method should actually be very friendly, but compared to Java's syntax, it should be a little disharmonious and messy. For C, we don't feel that troublesome, but when developing C R&D personnel generally seldom involve JavaScript, but for J2EE R&D personnel, this approach is always a bit awkward. It always feels like it is not a friendly package. In fact, it is just that the visual effect of the package is not very good. If you want to achieve the effect of visual encapsulation and achieve the effect of this method, I personally think it is more troublesome. That is the dynamic prototyping method.

5. Dynamic prototype

For developers who are used to using other languages, using a mixed constructor/prototype approach may feel less harmonious. After all, most object-oriented languages ​​visually encapsulate properties and methods when defining classes. Consider the following C# class:

Copy the code The code is as follows:

class Car //class
{
public string color = "red";
public int doors = 4;
public int mpg = 23;

public Car(string color, int doors, int mpg) //constructor
{
this.color = color;
this.doors = doors;
this.mpg = mpg;
}
public void showColor() //method
{
Console.WriteLine(this.color);
}
}

C# is very good It packages all the properties and methods of the Car class, so when you see this code, you know what function it wants to achieve. It defines the information of an object. Critics of the hybrid constructor/prototype approach argue that it is illogical to look for properties in the constructor's memory and methods outside it. Therefore, they designed a dynamic prototyping approach to provide a friendlier coding style.

The basic idea of ​​the dynamic prototype method is the same as the hybrid constructor/prototype approach, that is, non-functional properties are defined within the constructor, while functional properties are defined using prototype properties. The only difference is where the object methods are assigned. The following is the Car class rewritten with the dynamic prototype method:

Copy the code The code is as follows:

This constructor remains unchanged until checking whether typeof Car._initialized is equal to "undefined". This line of code is the most important part of the dynamic prototype method. If this value is undefined, the constructor will continue to define the object's methods using the prototype, and then set Car._initialized to true. If this value is defined (when its value is true, the value of typeof is Boolean), then the method will not be created. In short, this method uses a flag (_initialized) to determine if any methods have been assigned to the prototype. This method is created and assigned only once. To please traditional OOP developers, this code looks more like a class definition in other languages.

6 Mixing factory method

This method is usually a workaround when the previous method cannot be applied. Its purpose is to create fake constructors that just return a new instance of another kind of object. This code looks very similar to the factory function:

Copy the code The code is as follows:

function Car() {
var oTempCar = new Object();
oTempCar.color="red";
oTempCar.doors=4;
oTempCar.mpg=23;
oTempCar.showColor = function() {
                                                                                                                                                                                                                                                                                              ; , making it look like a real constructor:
var oCar = new Car();

Since the new operator is called inside the Car() constructor, the second new operator (located outside the constructor) will be ignored. The object created inside the constructor is passed back to the variable var. This approach has the same problems as the classic approach regarding the internal management of object methods. Strong recommendation: Avoid using this method unless absolutely necessary (see Chapter 15).

Summary: (Which method to use)
The most widely used method at present is the mixed constructor/prototype method. Additionally, the dynamic prototype approach is also popular and is functionally equivalent to the constructor/prototype approach. Either of these methods can be used. But don't use the classic constructor or prototype approach alone, as this can introduce problems into your code.

Copy code

The code is as follows://ps//static class (1 :function) var CarCollection = new function() { var _carCollection = new Array(); //global,private

this.Add = function(objCar) {

alert('Add' );
}
this.Get = function(carid) {
alert('Get');
}
}

//static class (2:json)


var Car = {
color: 'red', doors: 4,

showColor: function() { alert(this.color); }

}

Car.showColor();