Implementation example of javascript definition classes and classes _ javascript tips-js tutorial

This article mainly introduces the implementation of javascript definition classes and classes, and analyzes the definition methods and related usage skills of JavaScript classes in detail based on the instance form, which has some reference value, if you need it, refer to the example in this article to describe the implementation of javascript definition classes and classes. We will share this with you for your reference. The details are as follows:

Recently, several groups have seen people asking how a function in a class calls this. The published method after definition. Now I am publishing an article on implementation of the class.

First, let's talk about the class. In a class, we have the following features:

1. Public Method
2. Private Method
3. Attributes
4. Private Variables
5. destructor

Let's look at an example:

/*** Define Class ***/var Class = function () {var _ self = this; // reference a negative value to a variable var _ Field = "Test Field"; // Private Field var privateMethod = function () {// Private method alert (_ self. property); // call Property} this. property = "Test Property"; // public Property this. method = function () {// public Method alert (_ Field); // call private Field privateMethod (); // call private Method }}

I have written all the comments here, and you will probably understand them at a glance. For friends who write less JavaScript code, they may wonder why I define a variable named _ self, because in JS, this does not need to be used in other object languages, this will change in the parsing and running processes. Here is a brief introduction to the definition of this in js. If you need this, I can open one more article.

Definition: this is the object to which the function that contains it is called as a method.
Feature: the environment of this can be changed as the function is assigned to different objects!

If you are interested, you can find information on the Internet to find out the correct answer. Here _ self aims to open a private variable and direct the reference to the class itself.

I also talked about the problem of destructor, which can be implemented directly using code. At the end of the function, write and execute the Code directly.

/*** Define Class ***/var Class = function () {var _ self = this; // reference a negative value to a variable var _ Field = "Test Field"; // Private Field var privateMethod = function () {// Private method alert (_ self. property); // call Property} this. property = "Test Property"; // public Property this. method = function () {// public Method alert (_ Field); // call the private Field privateMethod (); // call the private method}/*** destructor ***/var init = function () {privateMethod () ;} init ();}

Use this class

Var c = new Class (); c. Method (); // usage

So OK.

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

I. Define a class and create an instance object for the class

In Javascript, we use functions to define classes, as shown below:

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

You might say, suspect? Isn't this a definition function? Yes, this is the definition function. We have defined a Shape function and initialized x and y. However, from another perspective, this is to define a Shape class, which has two attributes x and y. The initial values are 1 and 2,, we define that the key word of a class is function rather than class.

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

The Code is as follows:

Var aShape = new Shape ();

Ii. defining public and private attributes

We have created an aShape object. However, when we try to access its attributes, an error occurs, as shown below:

The Code is as follows:

AShape. x = 1;

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

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

In this way, we can access the Shape attributes, for example.

The Code is as follows:

AShape. x = 2;

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

3. Define public and private methods

In Javascript, a Function is an instance of the Function class. A Function indirectly inherits from an Object. Therefore, a Function is also an Object. Therefore, we can create a Function by assigning values. Of course, we can also assign a function to an attribute variable of the class. This attribute variable can be called a method because it is a executable function. The Code is as follows:

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

In the above Code, we define a draw and assign a function to it. Below, we can call this function through aShape, which is called a public method in OOP, for example:

The Code is as follows:

AShape. draw ();

If var is used, the draw becomes private. in OOP, it is called a private method, as shown in

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

In this way, you cannot use aShape. draw to call this function.

Iii. Constructor

Javascript does not support OOP, and of course there is no constructor. However, we can simulate a constructor by ourselves to make the object automatically called when it is created. The Code is as follows:

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

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

Iv. constructors with Parameters

How can a constructor contain parameters? In fact, it is very easy to write the parameters to be passed in to the parameter list of the function, as shown in figure

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 as follows:

The Code is as follows:

Var aShape = new Shape (0, 1 );

V. Static attributes and static methods

In Javascript, how do I define static attributes and methods? 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 attribute count, which belongs to a class rather than an object. Shape. staticMethod = function () {}; // defines a static method.

With static attributes and methods, we can use the class name to access it, as shown below:

alert ( aShape.count );aShape.staticMethod();

Note: static attributes and methods are both public. So far, I have no idea how to make static attributes and Methods private.

6. Access the Public and Private attributes of this class in the method.

Access your own attributes in the class method. Javascript has different access methods for Public and Private attributes. Please refer to the following code.

Function Shape (ax, ay) {var x = 0; var y = 0; this. gx = 0; this. gy = 0; var init = function () {x = ax; // you can directly write the variable name to access the private property. gx = ax; // to access public attributes, you must add this before the variable name. this. gy = ay;}; init ();}

7. Considerations for this

Based on my experience, this in a class does not always point to our object. The main reason is that Javascript is not an OOP language, and function and class are defined by function, of course it will cause some minor problems.

This pointer indicates an error in event processing. We want a member function of an object to respond to an event. When an event is triggered, the system will call this member function, however, the passed this pointer is no longer our own object. Of course, an error will occur when we call this in the member function.

The solution is to save this to a private attribute at the beginning of the definition class. Later, we can use this attribute to replace this. Using this method is quite safe and worry-free ~

Let's modify the code to solve this problem. Check the code in Part 6 and you will understand it.

Function Shape (ax, ay) {var _ this = this; // save this and use _ this instead of this, in this way, var x = 0; var y = 0; _ this. gx = 0; _ this. gy = 0; var init = function () {x = ax; // access the private property and directly write the variable name to y = ay; _ this. gx = ax; // to access public attributes, you must add this before the variable name. _ this. gy = ay;}; init ();}

I hope this article will help you design JavaScript programs.