search

Home >Web Front-end >JS Tutorial >Summary of several ways to define classes or functions in JavaScript_js object-oriented

Summary of several ways to define classes or functions in JavaScript_js object-oriented

WBOY
WBOYOriginal
2016-05-16 18:12:26893browse

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 should master it to create 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 what we create is Want to create multiple Car instances. We can use a function to encapsulate the above code to achieve this:

It seems that the effect is obvious and there is a difference Come on. 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 it as the prototype on which creating a new object depends. The method is as follows:
Copy the code The code is as follows:



First of all, there is no code in the constructor of this code. Next, add attributes through the prototype attribute of the object to define the attributes of the Car object. This method is good, but the problem is that the Car object points to an Array pointer. Both Car objects point to the same Array array. When one object car1 changes the reference of the attribute object (array Array), the other object car2 also changes the reference of the attribute object (array Array). Simultaneous changes are not allowed.
At the same time, this problem is also manifested in the fact that the prototype cannot take any initialization parameters, causing the constructor to fail to initialize normally. This requires another way to solve it: the hybrid constructor/prototype pattern.
4. Mixed constructor/prototype mode
It is very convenient to define classes by combining the constructor and prototype methods.
Copy code The code is as follows:



This method is to define the attributes internally and put the methods outside using prototype. definition. 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 prototypes
For developers who are used to using other languages, using a mixed constructor/prototype approach feels 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# packages all the properties and methods of the Car class very well, so you will know it when you see this code 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() {
alert(this.color);
}
return oTempCar;
}

Different from the classic way, this way uses the new operator , making it look like a real constructor:
var oCar = new Car();

Since the new operator is called inside the Car() constructor, the second new operation will be ignored symbol (outside the constructor). 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();
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：The message plug-in based on jQuery realizes the pop-up message box in the lower right corner_jqueryNext article：The message plug-in based on jQuery realizes the pop-up message box in the lower right corner_jquery

Related articles

See more