A brief discussion on realizing object-oriented classes in JavaScript_Basic knowledge

An object is anything that people want to study. From the simplest integers to complex airplanes, they can be regarded as objects. It can not only represent specific things, but also abstract rules, plans or events. --Quoted from Baidu Encyclopedia

Object-oriented programming is currently the most popular programming model. But what is frustrating is that JavaScript, the most widely used front-end application, does not support object-oriented programming.

JavaScript does not have access control characters, it does not have the keyword class to define a class, it does not support extend or colon for inheritance, and it does not use virtual to support virtual functions. However, Javascript is a flexible language. Let’s follow Let's take a look at how Javascript without the keyword class implements class definition and creates objects.

Define a class and create an instance object of the class

In Javascript, we use functions to define classes, as follows:

Copy code The code is as follows:

function Shape()
{
var x=1;
var y=2;
}

You might say, doubt? Isn't this a defining function? Yes, this is a definition function. We define a Shape function and initialize x and y. However, if you look at it from another angle, this is to define a Shape class, which has two attributes x and y, and the initial values ​​​​are 1 and 2 respectively. However, the keyword we use to define the class is function instead of class.

Then, we can create an object aShape of the Shape class, as follows:

Copy code The code is as follows:

var aShape = new Shape();

Define public and private properties

We have created the aShape object, but when we try to access its properties, an error occurs, as follows:

Copy code The code is as follows:

aShape.x=1;

This shows that properties defined with var are private. We need to use this keyword to define public properties.

Copy code The code is as follows:

function Shape()
{
This.x=1;
This.y=2;
}

In this way, we can access the attributes of Shape, such as:

Copy code The code is as follows:

aShape.x=2;

Okay, we can summarize based on the above code: use var to define the private attributes of the class, and use this to define the public attributes of the class.

Define public and private methods

In Javascript, a function is an instance of the Function class. Function indirectly inherits from Object. Therefore, a function is also an object. Therefore, we can use the assignment method to create a function. Of course, we can also assign a function to a class. An attribute variable, then this attribute variable can be called a method because it is an executable function. The code is as follows:

Copy code The code is as follows:

function Shape()
{
var x=0;
var y=1;
This.draw=function()
{
            //print;
};
}

We defined a draw in the above code and assigned a function to it. Next, we can call this function through aShape, which is called a public method in OOP, such as:

Copy code The code is as follows:

aShape.draw();

If defined with var, then this draw becomes private, which is called a private method in OOP, such as:

Copy code The code is as follows:

function Shape()
{
var x=0;
var y=1;
var draw=function()
{
            //print;
};
}

This way you cannot use aShape.draw to call this function.

Constructor

Javascript does not support OOP, and of course there is no constructor. However, we can simulate a constructor ourselves and let it be automatically called when the object is created. The code is as follows:

Copy code The code is as follows:

function Shape()
{
var init = function()
{
//Constructor code
};
init();
}

At the end of Shape, we artificially called the init function. Then, when a Shape object is created, init will always be automatically called and our constructor can be simulated.

Constructor with parameters

How to make the constructor take parameters? In fact, it is very simple. Just write the parameters to be passed into the parameter list of the function, such as:

Copy code The code is as follows:

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//Constructor
         x=ax;
y=ay;
};
init();
}

In this way, we can create objects like this:

Copy code The code is as follows:

var aShape = new Shape(0,1);

Static properties and static methods

How to define static properties and methods in Javascript? As shown below:

Copy code The code is as follows:

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//Constructor
         x=ax;
y=ay;
};
init();
}
Shape.count=0; //Define a static attribute count. This attribute belongs to the class, not the object.
Shape.staticMethod=function(){};//Define a static method

With static properties and methods, we can access it using the class name, as follows:

Copy code The code is as follows:

alert ( aShape.count );
aShape.staticMethod();

Note: Static properties and methods are public. So far, I don’t know how to make static properties and methods private~

Access the public and private properties of this class in methods

Access your own properties in the class method. Javascript has different access methods for public properties and private properties. Please look at the following code:

Copy code The code is as follows:

function Shape(ax,ay)
{
var x=0;
var y=0;
This.gx=0;
This.gy=0;
var init = function()
{
           x=ax;//To access private properties, just write the variable name directly
y=ay;
This.gx=ax;//To access public properties, you need to add this.
before the variable name This.gy=ay;
};
init();
}

Notes on this

According to the author's experience, this in the class does not always point to our object itself. The main reason is because Javascript is not an OOP language. Moreover, functions and classes are defined with functions, which of course will cause some minor problems.

The situation where this pointer points to an error is usually in event processing. We want the member function of an object to respond to an event. When the event is triggered, the system will call our member function. However, the incoming this The pointer is no longer our own object. Of course, calling this in the member function will certainly cause an error.

The solution is that we save this in a private attribute at the beginning of defining the class. In the future, we can use this attribute to replace this. I use this method to use this pointer which is quite safe and worry-free~

Let’s modify the code to solve this problem. Compare the code in Part 6 and you will understand:

Copy code The code is as follows:

function Shape(ax,ay)
{
var _this=this; //Save this and replace this with _this in the future, so that you will not be confused by this
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function()
{
           x=ax;//To access private properties, just write the variable name directly
y=ay;
​​​​ _this.gx=ax;//To access public properties, you need to add this.
before the variable name ​​​​ _this.gy=ay;
};
init();
}

Above we talked about how to define classes in Javascript, create objects of classes, create public and private properties and methods, create static properties and methods, simulate constructors, and discussed the error-prone this.

That’s it for talking about OOP implementation in Javascript. The above is the most practical content. Generally, Javascript is used to define classes and the above code is enough to create objects. Of course, you can also use mootools or prototype to define classes and create objects. I have used the mootools framework and I think it is very good. It has more complete Javascript class simulation and supports class inheritance. Interested readers can try it. Of course, if you use a framework, you need to include the relevant js header files in your web page, so I still hope that readers can create classes without a framework. In this way, the code is more efficient, and you can also see , it is not troublesome to create a simple class~