A brief introduction to JavaScript implementation of object oriented classes

Objects are anything that people want to study, from the simplest integer to the complex aircraft, etc., can be regarded as objects, which can not only represent concrete things, but also represent abstract rules, plans or events. -- from baidu baike

Define the class and create the instance object of the class

In Javascript, we use function to define the class, as follows:

function Shape()

{

    var x=1;

    var y=2;

} 

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

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

var aShape = new Shape(); 

Define public and private properties

We have created the aShape object, but when we try to access its properties, there will be an error, as follows:

aShape.x=1;  

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

function Shape()

{

    this.x=1;

    this.y=2;

}  

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

aShape.x=2;  

Well, we can conclude from the above code that var can define the private property of a class and this can define the public property of a class.

Define public and private methods

In Javascript, Function is the Function instance of the class, the Function of indirect inherited from Object, so the Function is an Object, therefore, we can use to create Function assignment method, of course, we can also be a Function is assigned to an attribute of a class variables, then the attribute variables can be called a method, because it is a Function to perform. 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. Next, we can call this function through aShape. OOP is called public method, such as:

aShape.draw();  

If defined using var, then the draw becomes private. OOP calls it a private method, such as:

function Shape()

{

    var x=0;

    var y=1;

    var draw=function()

    {

        //print;

    };

}  

This makes it impossible to call this function with ashape.draw.

The constructor

function Shape()

{

    var init = function()

    {

         //Constructor code 

    };

    init();

}  

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

Constructor with arguments

How do you make a constructor take arguments? In fact, it is very simple. The parameters to be passed can be written into the parameter list of the function, such as:

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 like this:

var aShape = new Shape(0,1);  

Static properties and static methods

How do you define static properties and methods in Javascript? As follows:

function Shape(ax,ay)

{

    var x=0;

    var y=0;

    var init = function()

    {

        //Constructor 

        x=ax;

        y=ay;

    };

    init();

}

Shape.count=0;//Define a static property, count, that belongs to the class, not to the object. < br / >
Shape.staticMethod=function(){};//Define a static method & NBSP; < br / >

With 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

Access the public and private properties of this class in methods

In the methods of the class to access their own properties, Javascript for public and private properties of the access method is 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()

    {

        x=ax;//To access the private property, write the variable name directly to 

        y=ay;

        this.gx=ax;//To access the public property, you need to prefix the variable name with this.

        this.gy=ay;

    };

    init();

}  

Notes for this

According to my experience, the this in the class is not always pointing to the object itself, mainly because Javascript is not an OOP language, and both functions and classes are defined by function, which of course causes some minor problems.

This pointer to the wrong occasion generally on the event processing, we want an object to a member function in response to an event, when the event is triggered after the system will call this member function, but the incoming this pointer is not the object of our own, of course, at this time in the member function call again this will of course make a mistake.

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

Let's change the code to solve this problem. Look at the code in part 6, and you'll see:

function Shape(ax,ay)

{

    var _this=this; //Save this and replace this with _this so you don't get confused by this 

    var x=0;

    var y=0;

    _this.gx=0;

    _this.gy=0;

    var init = function()

    {

        x=ax;//To access the private property, write the variable name directly to 

        y=ay;

        _this.gx=ax;//To access the public property, you need to prefix the variable name with this.

        _this.gy=ay;

    };

    init();

} 

We talked about defining classes in Javascript, creating objects for classes, creating public and private properties and methods, creating static properties and methods, simulating constructors, and discussing the error-prone this.