Detail how classes are defined in JavaScript

This article gives an example of how classes are defined in JavaScript. To share for your reference, the details are as follows:

Javascript itself doesn't support object-oriented, it has no access control, it does not define the class keyword class, it does not support inheritance extend or colon, nor has it virtual used to support virtual functions, however, Javascript is a flexible language, let's see how no keyword class Javascript implementation class definition, and create the object.

1. Define the class and create an instance object of the class

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

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

You might say, doubt? Isn't this a function that defines it? Yes, this is the definition function, we defined an Shape function and initialized x and y. However, if you look at it another way, this is defining an Shape class with two attributes, x and y, starting with 1 and 2, except that we defined the class with the key function instead of class.

We can then create the object aShape of the Shape class as follows:

var aShape = new Shape();

2. Define public and private properties

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

aShape.x = 1 ;

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

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

In this way, we can access the Shape properties, such as.

aShape.x = 2 ;

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

3. Define public and private methods

Function is in Javascript Function class instances, Function indirectly inherited from Object, therefore, the function is also an object, therefore, we can use the method to create function assignment, of course, we can also be a function is assigned to class 1 attribute variables, so this attribute variables can be called a method, because it is a function of 1 can be executed. The code is as follows:

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

We define 1 draw in the above code, and assign 1 function to it. Now, we can call this function via aShape, which is called public method in OOP, such as:

aShape.draw();

If defined in var, then the draw becomes private, which is called a private method in OOP, for example

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

You cannot call this function using ES82en.draw.

3. Constructor

Javascript does not support OOP, and of course there is no constructor, but we can simulate a constructor ourselves that will be called automatically when the object is created, as follows:

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

At the end of Shape, we artificially invoke the init function, so init is always called automatically after the first Shape object is created to simulate our constructor.

4. Constructors with arguments

How do you make constructors take arguments? Simply 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 ()
{
//  The constructor  
x = ax;
y = ay;
};
init();
}

In this way, we can create objects like this:

var aShape = new Shape( 0 , 1 );

Static properties and static methods

How do you define static properties and methods in Javascript? As shown below.

function Shape(ax,ay)
{
var x = 0 ;
var y = 0 ;
var init = function ()
{
//  The constructor  
x = ax;
y = ay;
};
init();
}
Shape.count = 0 ; //  define 1 Static attribute count This property belongs to a class, not an object.  
Shape.staticMethod = function (){}; //  define 1 A static method 

With static properties and methods, we can access it with the class name, as shown below

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

6. Access the public and private properties of this class in the method

Access your own properties in the methods of your class. Javascript has different access methods for public and private properties

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 by simply writing the variable name  
y = ay;
this .gx = ax; //  To access a public property, you need to prefix the variable name this. 
this .gy = ay;
};
init();
}

7. Notes for this

In my experience, this in the class does not point directly at the object itself, mainly because Javascript is not an OOP language, and functions and classes are defined in function, which of course causes some minor problems.

this hand generally refers to the wrong place at the event handling, we want an object to a member function in response to an event, when the event is triggered, the system will call this member function, but the incoming this pointer is not the object of our own, of course, then again in the member function call this will certainly make a mistake.

The solution is that we save this to a private property at the beginning of the definition class 1, which we can replace this with later. Using the this pointer in this way is quite safe and easy to worry about

We modify the 1 code to solve the this problem. If you look at the code in Part 6, you should get the 1

function Shape(ax,ay)
{
var _this = this ; //  the this Save it for later use _this Instead of this "So that no one will be this Get dizzy  
var x = 0 ;
var y = 0 ;
_this.gx = 0 ;
_this.gy = 0 ;
var init = function ()
{
x = ax; //  Access the private property by simply writing the variable name  
y = ay;
_this.gx = ax; //  To access a public property, you need to prefix the variable name this. 
_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 discussed the error-prone this.

So much for the OOP implementation in Javascript. This is the most practical part of Javascript, and it is enough to use Javascript to define classes and create objects. Of course, you can also use mootools or prototype to define classes and create objects. I've used the mootools framework and found it quite nice. It's better for Javascript's class emulation, and it also supports class inheritance, so interested readers can try out 1. Of course, if you're using a framework, you'll need to include the relevant js header file in your page, so I'd like you to be able to create a class without a framework, so the code is more efficient, and as you can see, it's not too much trouble to create a simple class

Supplement:

Four ways to define JavaScript classes:

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

0

I hope this article has been helpful in JavaScript programming.