Objects are anything people want to study, from the simplest integers to complex aircraft, etc., which can not only represent concrete things, but also abstract rules, plans or events. --Quoted from Baidu Encyclopedia
Object-oriented programming is the most popular programming model at present. But it is frustrating that, as the most widely used front-end JavaScript, does not support object-oriented.
Javascript does not have access control characters, it does not define the keyword class, it does not support inherited extend or colon, and it does not use virtual to support virtual functions. However, Javascript is a flexible language. Let's take a look at how Javascript without keyword class implements class definition and creates objects.
Define the class and create the instance object of the class
In Javascript, we use function to define the class, as follows:
The code copy is as follows:
function Shape()
{
var x=1;
var y=2;
}
You might say, doubt? Isn't this a defining function? That's right, this is a defining function. We define a Shape function and initialize x and y. However, if you look at it from another perspective, this is to define a Shape class, which contains two properties x and y, and the initial values are 1 and 2 respectively. However, the keywords we define the class are function rather than class.
Then, we can create an object aShape of the Shape class, as follows:
The code copy is as follows:
var aShape = new Shape();
Define public and private properties
We have created aShape object, but when we try to access its properties, we get an error like this:
The code copy is as follows:
aShape.x=1;
This shows that properties defined with var are private. We need to use this keyword to define public attributes.
The code copy is as follows:
function Shape()
{
this.x=1;
this.y=2;
}
In this way, we can access Shape properties, such as:
The code copy is as follows:
aShape.x=2;
OK, we can summarize from the above code: using var to define the private attribute of the class, and using this to define the public attribute of the class.
Define public and private methods
In Javascript, a function is an instance of the Function class, and the Function is indirectly inherited from Object, so a function is also an object. Therefore, we can create a function using the assignment method. Of course, we can also assign a function to an attribute variable of the class. Then, this attribute variable can be called a method because it is an executable function. The code is as follows:
The code copy is as follows:
function Shape()
{
var x=0;
var y=1;
this.draw=function()
{
//print;
};
}
We define a draw in the above code and assign a function to it. Below, we can call this function through aShape, which is called a public method in OOP, such as:
The code copy is as follows:
aShape.draw();
If defined with var, then the draw becomes private, which is called a private method in OOP, such as:
The code copy 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, so of course there is no constructor. However, we can simulate a constructor ourselves and make the object automatically called when it is created. The code is as follows:
The code copy is as follows:
function Shape()
{
var init = function()
{
//Constructor code
};
init();
}
At the end of Shape, we artificially called the init function. Then, when creating a Shape object, init will always be called automatically, which can simulate our constructor.
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 function parameter list, such as:
The code copy is as follows:
function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//Constructor
x=ax;
y=ay;
};
init();
}
This way, we can create the object like this:
The code copy 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:
The code copy 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 property count, which belongs to the class, not to the object.
Shape.staticMethod=function(){};//Define a static method
With static properties and methods, we can access it with class names, as follows:
The code copy is as follows:
alert ( aShape.count );
aShape.staticMethod();
Note: Static properties and methods are both public. So far, I don’t know how to make static properties and methods private~
Access public and private properties of this class in a method
Accessing your own properties in class methods. Javascript's access methods for public and private properties are different. Please see the following code:
The code copy is as follows:
function Shape(ax,ay)
{
var x=0;
var y=0;
this.gx=0;
this.gy=0;
var init = function()
{
x=ax;//Add private attributes and write the variable name directly
y=ay;
this.gx=ax;//To access public attributes, you need to add this before the variable name.
this.gy=ay;
};
init();
}
Things to note about this
According to my experience, this in the class does not always point to our object itself. The main reason is that Javascript is not an OOP language, and functions and classes are defined by functions, which of course will cause some minor problems.
The situation where this pointer points incorrectly is generally in event processing. We want the member function of a certain object to respond to an event. When the event is triggered, the system will call our member function. However, the passed this pointer is no longer our own object. Of course, it will be an error to call this in the member function at this time.
The solution is to save this into a private property at the beginning of the definition class. Later, we can use this property instead of this. I'm using this pointer with this method is quite safe and worry-free~
Let's modify the code to solve this problem. By comparing the code in Part 6, you will definitely understand:
The code copy is as follows:
function Shape(ax,ay)
{
var _this=this; //Save this and use _this instead of this in the future so that you won't be confused by this
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function()
{
x=ax;//Add private attributes and write the variable name directly
y=ay;
_this.gx=ax;//To access public attributes, you need to add this before the variable name.
_this.gy=ay;
};
init();
}
Above we talked about how to define classes in Javascript, create class objects, create public and private properties and methods, create static properties and methods, simulate constructors, and discuss this error-prone.
That’s all about the OOP implementation in Javascript. The above is the most practical content. Generally, Javascript defines classes, and using the above code to create objects is enough. Of course, you can also use mootools or prototype to define classes and create objects. I have used the mootools framework and it feels very good. It is more perfect for Javascript class simulation and supports class inheritance. Interested readers can try it. Of course, if you use a framework, you need to include relevant js header files in your webpage. Therefore, I still hope that readers can create classes without a framework. In this way, the code is more efficient, and you can also see that it is not troublesome to create a simple class~