class defined in JavaScript

JavaScript itself does not support object-oriented, it does not have an access control character, it does not define the class's keyword class, it does not support inherited extend or colons, nor does it support virtual functions, but JavaScript is a flexible language, Let's take a look at how JavaScript, without the keyword class, implements the class definition and creates objects.

One: Define the 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 definition function? Yes, this is the definition function, we define a shape function and initialize x and Y. However, if you look at it from a different perspective, this defines a shape class that has two attributes X and Y, and the initial values are 1 and 2, except that we define the class's keyword as a function rather than class.

Then, we can create the object Ashape of the shape class, as follows:

var ashape = new Shape ();

Two: Defining Public and private properties

We've created the Ashape object, but when we try to access its properties, we get an error, as follows:

ashape.x = 1;

This indicates that the attribute defined with VAR is 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 properties of shape, such as:

ashape.x = 2;

OK, we can sum it up according to the above code: use Var to define the private property of the class, and use this to define the public property of the class. Three: Defining public and private methods

In JavaScript, functions are instances of function classes, and functions are indirectly inherited from object, so a function is also an object, so we can use the assignment method to create a function, of course, we can also assign a function to a property variable of a class, This property variable can be called a method because it is a function that can be executed. The code 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, and we can call this function through Ashape, which is called a public method in OOP, such as:

Ashape.draw ();

If defined with Var, the draw becomes private, and OOP is called a private method, such as

function Shape ()

{

var x = 0;

var y = 1;

var draw = function ()

{

Print

};

}

This way, you can't use Ashape.draw to invoke this function.

Three: Constructors

JavaScript does not support OOP, and of course there is no constructor, but we can simulate a constructor on our own, let the object be invoked automatically when it is created, the following code:

function Shape ()

{

var init = function ()

{

Constructor code

};init ();

}

At the end of shape, we call the init function artificially, then, when we create a Shape object, init is always invoked automatically, and we can simulate our constructor.

Four: Constructors with parameters

How do I get a constructor with a parameter? It's really simple to write the arguments you pass in to the function's argument list, like

function Shape (Ax,ay)

{

var x = 0;

var y = 0;

var init = function ()

{

Constructors

x = ax;

y = ay;

};init ();

}

That way, we can create objects like this:

var ashape = new Shape (0, 1);

Five: 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 ()

{

Constructors

x = ax;

y = ay;

};init ();

}

Shape.count = 0; Defines a static property count, which belongs to the class and is not object-owned.

Shape.staticmethod = function () {}; To define a static method

With the static properties and methods, we can access it with 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.

Vi. accessing the public and private properties of this class in a method

To access your own properties in the method of a class, JavaScript has different access methods for public and private properties, 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 ()

{

x = ax; Access private properties, write variable names directly

y = ay;

this. GX = ax; To access the public property, you need to precede the variable name with this.

this. Gy = ay;

};init ();

}

Seven: This is a matter of note

According to the author's experience, this does not always point to the object itself, primarily because JavaScript is not an OOP language, and functions and classes are defined by function, which can cause minor problems.

This pointer refers to the wrong situation generally on the event processing, we want to have an object's member function to respond to an event, when the event is triggered, the system will call our member function, but, the incoming this pointer is not our own object, of course, Then call this in the member function, of course, there will be an error.

The solution is that we save this to a private property at the beginning of the definition class, and later we can use this property instead of this. I used this method to use this pointer quite safe, and it is very easy to

Let's revise the code to solve this problem. Look at the code in section six, you'll understand.

function Shape (Ax,ay)

{

var _this = this; Save this and replace this with _this, so you don't get dizzy by this.

var x = 0;

var y = 0;

_THIS.GX = 0;

_this.gy = 0;

var init = function ()

{

x = ax; Access private properties, write variable names directly

y = ay;

_THIS.GX = ax; To access the public property, you need to precede the variable name with this.

_this.gy = ay;

};init ();

}

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 discuss this error prone.

About OOP implementations in JavaScript here is the most practical content, generally use JavaScript to define the class, the creation of objects with the above code is enough. Of course, you can also use MooTools or prototype to define classes and create objects. I've used the MooTools framework, it feels good, it's more perfect for JavaScript class simulations, and it supports class inheritance, and interested readers can try. Of course, if you use a framework, you need to include the relevant JS headers in your Web page, so I still want readers to be able to create classes without frames, so that the code is more efficient, and you can see that creating a simple class is not a hassle.