Ajax Basics: The implementation of classes in JavaScript

Ajax|javascript in JavaScript You can use the Function keyword to define a "class" and how to add members to a class. A variable or method referenced within a function through the this pointer becomes a member of the class, for example:

function Class1 () {
var s= "abc";
This.p1=s;
This.method1=function () {
Alert ("This is the test method");
}
}
var obj1=new Class1 ();
By acquiring object obj1 with new Class1 (), object obj1 automatically obtains attribute P1 and method method1.

In JavaScript, the function itself is defined as the constructor of the class, combined with the nature of the object described earlier and the use of the new operator, the process of creating an object using new is described below.

(1) An empty object is created when the interpreter encounters the new operator;

(2) Start running the Class1 function and point the this pointer to the newly created object;

(3) Because when you assign a value to a property that does not exist for the object, the interpreter creates the property for the object, for example, in Class1, when the statement is executed to This.p1=s, a property P1 is added and the value of the variable s is assigned to it, so that function execution is the process of initializing the object. That is to realize the function of the constructor;

(4) When the function is done, the new operator returns the initialized object.

Through this whole process, the basic object-oriented mechanism is implemented in JavaScript. Thus, in JavaScript, the definition of function is actually to implement the constructor of an object, which is accomplished by a function. The disadvantages of this approach are:

• Put all the initialization statements, member definitions together, the code logic is not clear enough to implement complex functions.

• A constructor is executed once for each instance of the class being created. The properties and methods defined in the constructor are always created repeatedly, for example:

This.method1=function () {
Alert ("This is the test method");
}

The method1 here is created once per Class1 instance, creating a waste of memory. The next section describes the mechanism of another class definition: The Prototype object, which solves the drawbacks of defining class members in a constructor.

defining class members using the prototype object 　

The previous section describes the implementation of classes and the implementation of constructors, and now introduces another mechanism for adding members to a class: the Prototype object. When a function is new, the members of the object are automatically assigned to the object being created, for example:


Prototype is a JavaScript object that can add, modify, and Delete methods and properties for prototype objects. To add a member definition to a class.

Understanding the prototype object of a function, now look at the execution of new.

(1) Create a new object and let the this pointer point to it;

(2) Assigning all members of the prototype object of the function to this new object;

(3) Executing the function body to initialize the object;

(4) Returns the object created in (1).

The process of initializing an object with prototype is much more than the execution of the new one described in the previous section, which is also consistent with the literal meaning of prototype, which is the prototype of an instance of the corresponding class. This initialization process occurs before the function body (constructor) executes, so you can call the properties and methods defined in prototype within the function body, for example:


In contrast to the previous code, the method defined in prototype is invoked here within Class1, so that a dialog box pops up during the construction of the object, displaying a value of 1 for the Prop property.

It is important to note that the definition of a prototype object must precede the statement that created the class instance, otherwise it will not work, for example:


This code will produce a run-time error, and the display object has no Showprop method, because the method is defined after instantiating the statement of a class.

This shows that the prototype object is dedicated to the members of the design class, which is closely related to a class, and prototype also has an important attribute: constructor, which represents a reference to the constructor, for example:

function Class1 () {
Alert (1);
}
Class1.prototype.constructor (); Calling the constructor of a class
After this code is run, a dialog box appears, displaying the word "1" above, which shows that a prototype is closely related to the definition of a class. In fact: Class1.prototype.constructor===class1.

A design pattern for JavaScript classes 　

You've already described how to define a class, initialize an instance of a class, and you can add members to function bodies defined by functions, and you can use prototype to define the members of a class, and programming code seems confusing. How do you define a class in a clear way? The implementation pattern of a class is given below.

In JavaScript, because of the flexible nature of objects, you can add members to a class in a constructor, adding flexibility while increasing the complexity of your code. In order to improve the readability and development efficiency of the Code, this method of defining members can be used instead of the prototype object, so the function definition is the constructor of the class, which conforms to the implementation of the traditional meaning class: The class name and the constructor name are the same. For example:

function Class1 () {
Constructors
}
Member definition
class1.prototype.someproperty= "Sample";
Class1.prototype.somemethod=function () {
Method implementation Code
}
Although the above code for the definition of the class has a lot of clarity, but each definition of a property or method, you need to use a class1.prototype, not only the size of the code is larger, and readability is not enough. For further improvement, you can use the constructor of an untyped object to specify the prototype object, thereby implementing the member definition of the class:

Define a class Class1
function Class1 () {
Constructors
}
To implement the member definition of a class by specifying a prototype object
class1.prototype={
Someproperty: "Sample", Somemethod:function () {
Method code
},
..//other properties and methods.
}
The above code defines class1 in a very clear way, the constructor is implemented directly with the class name, and the member uses the untyped object to define all the properties and methods in the form of a list, and can initialize the value of the property at the same time as the definition. This is also more like the implementation of classes in the traditional sense object-oriented language. Just the member definitions of constructors and classes are divided into two parts, which can be viewed as a fixed pattern for defining classes in JavaScript, which is easier to understand when used.

Note: References to members of a class must be done through the this pointer, for example in the SomeMethod method in the example above, if you want to use the attribute Someproperty, Must be in the form of This.someproperty, because each property and method is independent in JavaScript, and they are contacted by the this pointer on an object.