Class implementation in Javascript

Javascript itself does not support object-oriented, it has no 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 take a look at how Javascript without the keyword class implements class definition and creates objects.

One: Define a class and create an instance object of the class
In Javascript, we use function to define a class, 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:

var aShape = new Shape();

Two: Define public and private properties
We have already created the aShape object, but when we try When accessing its properties, an error will occur, as follows:
aShape.x=1;

This shows that the properties defined with var are private. We need to use the this keyword to define the public attributes
function Shape()
{
this.x=1;
this.y=2;
}

In this way, we can access the attributes of Shape, such as.
aShape.x=2;

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

Three: Define public and private methods

In Javascript, a function is an instance of the Function class, and Function indirectly inherits from Object. Therefore, a function is also an object. Therefore, we can create a function using the assignment method. Of course, we You 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:

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

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

If defined with var, then this draw becomes private, which is called a private method in OOP, such as
function Shape()
{
var x=0;
var y=1;
var draw=function()
{
//print;
};
}
This way you cannot use aShape.draw to call this function.

Three: 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:
function Shape()
{
var init = function()
{
//Constructor code
};

init();
}

At the end of Shape, we artificially called the init function, then, after creating a Shape object Yes, init will always be called automatically and our constructor can be simulated.

Four: 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

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
                                                                                                                                                    . );


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

function Shape(ax,ay)
{

var x=0;

var y=0;
var init = function()

};

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

Six: Access the public properties and private properties of this class in the method

Access your own properties in the class method, Javascript has public and private properties The access methods of attributes are different, please look at the following code
function Shape(ax,ay)
{
var x=0;
var y=0;
this.gx=0;
this.gy=0;
var init = function()
                                              this.
this.gy=ay;
};

init();
}

Seven: Notes on this
According to the author’s experience, this in the class does not always point to our object itself. The reason is that Javascript is not an OOP language, and 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, but the passed this pointer has been It 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. It is quite safe for me to use this pointer in this way, and it is very worry-free~
Let’s modify the code to solve this problem. Compare the code in Part 6, you will definitely understand
function Shape(ax,ay)
{
var _this=this; //Save this, and use _this to replace this in the future, so that you will not be confused by this Dizzy
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function()
{
x=ax;//Access private attributes, write directly Just use the variable name
y=ay;
_this.gx=ax;//To access public properties, you need to add this.
_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~

In the next version of Javascript, support for OOP will be added. By then, we will see the class keyword, public, private access control characters~extend inheritance. If you are interested in the next generation of Javascript, you might as well get in touch with ActionScript 3.0 first. This is a quite advanced scripting language. It is a masterpiece after Adobe acquired Macromedia. Like Javascript, it belongs to ECMAScript, but it is AS3. 0 is the implementation of version 4 of ECMAScript. To learn ActionScript 3.0, I highly recommend "ActionScript 3 Road to the Palace" by teacher Sun Ying. This book is absolutely well written, especially the object-oriented part. It is very easy to understand and the examples are vivid. After reading it, I feel very good The harvest, while admiring the new version of ECMAScript, also gave me great motivation to continue to learn OOP programming ideas in depth. Interested readers may wish to read it~

The above is the content of class implementation in Javascript, more related content Please pay attention to the PHP Chinese website (www.php.cn)!