A brief talk on the class-based knowledge of JavaScript implementation in object-oriented

object is anything people want to study, from the simplest integer to the complex plane can be regarded as an object, it can not only represent the specific things, but also can represent abstract rules, plans or events. --Quote from Baidu Encyclopedia

Object-oriented programming is the most popular programming mode at the moment. But sadly, the most widely used JavaScript as a front-end does not support object-oriented.

JavaScript 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.

To define a class and create an instance object of the class

In JavaScript, we use function to define a class, as follows:

Copy Code code as follows:

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

You might say, suspect? Isn't this the 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:

Copy Code code as follows:

var ashape = new Shape ();

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:

Copy Code code 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.

Copy Code code as follows:

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

In this way, we can access the properties of shape, such as:

Copy Code code as follows:

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.

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:

Copy Code code 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:

Copy Code code as follows:

Ashape.draw ();

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

Copy Code code as follows:

function Shape ()
{
var x=0;
var Y=1;
var draw=function ()
{
Print
};
}

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

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:

Copy Code code as follows:

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.

Constructors with parameters

How do I get a constructor with arguments? In fact, it is very simple to write the arguments passed in to the function's argument list, such as:

Copy Code code as follows:

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:

Copy Code code as follows:

var ashape = new Shape (0,1);

static properties and Static methods

How do you define static properties and methods in JavaScript? As shown below:

Copy Code code as follows:

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 () {};//defines a static method

With the static properties and methods, we can access it with the class name, as follows:

Copy Code code 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.

To access 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:

Copy Code code as follows:

function Shape (Ax,ay)
{
var x=0;
var y=0;
this.gx=0;
this.gy=0;
var init = function ()
{
x=ax;//access to private properties, write variable names directly
Y=ay;
this.gx=ax;//access to the public property, you need to precede the variable name with this.
This.gy=ay;
};
Init ();
}

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. As you can see from the code in part six, you must understand:

Copy Code code as follows:

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 to private properties, write variable names directly
Y=ay;
_this.gx=ax;//access to 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.