Introduction to JavaScript to implement object-oriented classes and javascript object-oriented

Introduction to JavaScript to implement object-oriented classes and javascript object-oriented

Objects are all things that people need to study. From the simplest integer to the complex aircraft, they can be regarded as objects. They can not only represent specific things, it can also represent abstract rules, plans, or events. -- Imported from Baidu encyclopedia

Object-Oriented Programming is currently the most popular programming mode. However, it is frustrating that javascript, the most widely used front-end, does not support object-oriented processing.

Javascript does not have an access control character. It does not define the class keyword. It does not support extend or colons inherited, and it does not support virtual functions. However, javascript is a flexible language. Let's take a look at how Javascript without a keyword class can implement class definition and create objects.

Define a class and create an instance object for the class

In Javascript, we use functions to define classes, as shown below:

Copy codeThe Code is as follows:
Function Shape ()
{
Var x = 1;
Var y = 2;
}

You might say, suspect? Isn't this a definition function? Yes, this is the definition function. We have defined a Shape function and initialized 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. The initial values are 1 and 2,, we define that the key word of a class is function rather than class.

Then, we can create the aShape object of the Shape class, as shown below:

Copy codeThe Code is as follows:
Var aShape = new Shape ();

Define public and private attributes

We have created an aShape object. However, when we try to access its attributes, an error occurs, as shown below:

Copy codeThe Code is as follows:
AShape. x = 1;

This indicates that the property defined with var is private. We need to use the this keyword to define public attributes.

Copy codeThe Code is as follows:
Function Shape ()
{
This. x = 1;
This. y = 2;
}

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

Copy codeThe Code is as follows:
AShape. x = 2;

Well, we can conclude from the code above that var can be used to define the private attribute of the class, while this can be used to define the public attribute of the class.

Define public and private methods

In Javascript, a Function is an instance of the Function class. A Function indirectly inherits from an Object. Therefore, a Function is also an Object. Therefore, we can create a Function by assigning values. Of course, we can also assign a function to an attribute variable of the class. This attribute variable can be called a method because it is a executable function. The Code is as follows:

Copy codeThe Code is as follows:
Function Shape ()
{
Var x = 0;
Var y = 1;
This. draw = function ()
{
// Print;
};
}

In the above Code, we define a draw and assign a function to it. Below, we can call this function through aShape, which is called a public method in OOP, for example:

Copy codeThe Code is as follows:
AShape. draw ();

If var is used, the draw becomes private. in OOP, it is called a private method, for example:

Copy codeThe Code is as follows:
Function Shape ()
{
Var x = 0;
Var y = 1;
Var draw = function ()
{
// Print;
};
}

In 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 by ourselves to make the object automatically called when it is created. The Code is as follows:

Copy codeThe Code is as follows:
Function Shape ()
{
Var init = function ()
{
// Constructor code
};
Init ();
}

At the end of the Shape, we manually call the init function, so when we create a Shape object, init will always be automatically called to simulate our constructor.

Constructors with Parameters

How can a constructor contain parameters? In fact, it is very easy to write the parameters to be passed in to the parameter list of the function, such:

Copy codeThe 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 an object as follows:

Copy codeThe Code is as follows:
Var aShape = new Shape (0, 1 );

Static attributes and static methods

In Javascript, how do I define static attributes and methods? As follows:

Copy codeThe 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; // defines a static attribute count, which belongs to a class rather than an object.
Shape. staticMethod = function () {}; // defines a static method.

With static attributes and methods, we can use the class name to access it, as shown below:

Copy codeThe Code is as follows:
Alert (aShape. count );
AShape. staticMethod ();

Note: static attributes and methods are both public. So far, I have no idea how to make static attributes and Methods private ~

Access the Public and Private attributes of this class in the Method

Access your own attributes in the class method. Javascript has different access methods for Public and Private attributes. Please refer to the following code:

Copy codeThe 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; // access the private property and write the variable name directly.
Y = ay;
This. gx = ax; // you need to add this before the variable name to access public attributes.
This. gy = ay;
};
Init ();
}

This considerations

Based on my experience, this in a class does not always point to our object. The main reason is that Javascript is not an OOP language, and function and class are defined by function, of course it will cause some minor problems.

This pointer indicates an error in event processing. We want a member function of an object to respond to an event. When an event is triggered, the system will call this member function, however, the passed this pointer is no longer our own object. Of course, an error will occur when we call this in the member function.

The solution is to save this to a private attribute at the beginning of the definition class. Later, we can use this attribute to replace this. Using this method is quite safe and worry-free ~

Let's modify the code to solve this problem. From the code in Part 6, you must understand:

Copy codeThe Code is as follows:
Function Shape (ax, ay)
{
Var _ this = this; // save this and use _ this to replace this in the future, so that this will not get dizzy.
Var x = 0;
Var y = 0;
_ This. gx = 0;
_ This. gy = 0;
Var init = function ()
{
X = ax; // access the private property and write the variable name directly.
Y = ay;
_ This. gx = ax; // before the variable name, add this.
_ This. gy = ay;
};
Init ();
}

We talked about how to define classes in Javascript, create class objects, create public and private attributes and methods, create static attributes and methods, and simulate constructors, and discussed the error-prone this.

As for the implementation of OOP in Javascript, the above is the most practical content. Generally, classes are defined using Javascript, 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 feel very good. It has improved the 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 the reader can create classes without a framework. In this way, code efficiency is high, and you can also see that it is not difficult to create a simple class ~