JavaScript implements object-oriented classes

Objects are anything that people want to study, from the simplest integers to the complex planes, which can be seen as objects, not only to represent specific things, but also to represent abstract rules, plans, or events. --Quote from Baidu Encyclopedia

Object-oriented programming is currently the most popular programming model. But it is frustrating that, as the most widely used JavaScript in the front-end, object-oriented is not supported .

JavaScript does not have an access control, 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 look at how JavaScript without the keyword class implements the class definition and creates the object.

Defining a class and creating an instance object of the class

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

function Shape () {    var x=1;    

You might say, suspect? 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 in a different way, this is defining a shape class with two attributes X and Y, and the initial values are 1 and 2, except that we define the class's keyword as function rather than class.

We can then create the object Ashape of the shape class, as follows:

Defining public and private properties

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

Ashape.x=1;  

This means that the attribute defined with VAR is private. We need to use the This keyword to define the properties of the public.

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

This allows us to access the properties of the shape, such as:

ashape.x=2;  

Well, we can summarize according to the above code: with Var you can define the private property of the class, and this can define the public property of the class.

Defining public methods and private methods

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

Ashape.draw ();  

If it is defined with Var, then this draw becomes private and is called a private method in oop, such as:

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

This function cannot be called with Ashape.draw.

constructor function

JavaScript does not support OOP, and of course there are no constructors, but we can simulate a constructor ourselves so that the object is automatically called when it is created, with the following code:

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

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

Constructors with parameters

How do I get the constructor to take arguments? In fact, it is very simple to write the arguments that will be passed in to the function's argument list, 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 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 ()    {        //constructor        X=ax;        Y=ay;    };    Init ();} shape.count=0;//defines a static property count, which belongs to the class, not to the object. Shape.staticmethod=function () {};//defines a static method  

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

Accessing the public and private properties of this class in a method

To access your own properties in the methods of the 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;//accesses the private property and writes the variable name directly to        Y=ay;        this.gx=ax;//access to the public property, you need to precede the variable name with this.        This.gy=ay;    };    Init ();}  

Precautions for this

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

This pointer refers to the wrong situation generally above the event processing, we want to let 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 anymore, of course, Calling this again in the member function will of course make an error.

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

Let's modify the code to resolve this issue. Look at the code in part six, you must understand:

function Shape (ax,ay) {    var _this=this;//Save this and later use _this instead of this, so it will not be dizzy by this    var x=0;    var y=0;    _this.gx=0;    _this.gy=0;    var init = function ()    {        x=ax;//accesses the private property and writes the variable name directly to        Y=ay;        _this.gx=ax;//access to the public property, you need to precede the variable name with this.        _this.gy=ay;    };    

We talked about how to define classes in JavaScript, create objects for classes, create public and private properties and methods, create static properties and methods, simulate constructors, and discuss error-prone this.

About the OOP implementation in JavaScript here, the above is the most useful content, generally use JavaScript to define classes, creating objects with the above code is sufficient. Of course, you can also use MooTools or prototype to define classes and create objects. I have used the MooTools framework, it feels good, it is more perfect for JavaScript class simulation, also supports the inheritance of classes, interested readers can go to try. Of course, if you use a framework, then you need to include the relevant JS header file in your Web page, so I still hope that the reader can create a class without a framework, so that the code is more efficient, and you can see, to create a simple class is not a hassle ~

In the next version of JavaScript, support for OOP will be added, and we will see the class keyword, public, private access control ~extend inherited. If you're interested in the next generation of JavaScript, you might want to touch ActionScript3.0, a fairly advanced scripting language, a masterpiece of Adobe's acquisition of Macromedia, which, like JavaScript, All belong to ECMAScript, but AS3.0 is ECMAScript's 4th edition of the implementation. To learn ActionScript3.0, I would like to recommend Sun Ying Teacher's "ActionScript3 Hall Road", this book is absolutely good, especially the object-oriented part, written in a particularly easy-to-understand, vivid examples, after reading feeling very rewarding, In the praise of the new version of the ECMAScript, but also gave me a great deal of power continue to learn OOP programming ideas

Original: http://www.hellocy.com/Article/index/aid/75--bareman's personal blog

JavaScript implements object-oriented classes