AJAX Basics: Implementation of Classes in JavaScript In JavaScript, you can use the function keyword to define a "class" and how to add members to the class. Variables or methods referenced through this pointer within a function will become members of the class. For example:
The following is a code snippet:
function class1(){
var s="abc";
this.p1=s;
this.method1=function(){
alert("this is a test method");
}
}
var obj1=new class1();
Obtain object obj1 through new class1(), and object obj1 automatically obtains attribute p1 and method method1.
In JavaScript, the definition of function itself is the constructor of a class. Combining the properties of objects introduced earlier and the usage of the new operator, the following describes the process of creating objects using new.
(1) When the interpreter encounters the new operator, it creates an empty object;
(2) Starts to run the class1 function and points the this pointer in it to the newly created object;
(3) Because when the object does not exist, When assigning a value to an attribute, the interpreter will create the attribute for the object. For example, in class1, when the statement this.p1=s is executed, an attribute p1 will be added and the value of the variable s will be assigned to it, so that Function execution is the process of initializing this object, that is, realizing the role of the constructor;
(4) When the function is executed, the new operator returns the initialized object.
Through this entire process, the basic object-oriented mechanism is implemented in JavaScript. It can be seen that in JavaScript, the definition of function is actually to implement the constructor of an object, which is completed through functions. The disadvantages of this method are:
· Putting all initialization statements and member definitions together, the code logic is not clear enough, and it is difficult to implement complex functions.
·Every time an instance of a class is created, the constructor must be executed once. The properties and methods defined in the constructor are always created repeatedly. For example:
the following is a code fragment:
this.method1=function(){
alert("this is a test method");
}
Every time method1 here creates an instance of class1, it will be created once, causing a waste of memory. The next section introduces another class definition mechanism: the prototype object, which can solve the shortcomings caused by defining class members in the constructor.
Using prototype objects to define class members
The previous section introduced the implementation mechanism of classes and the implementation of constructors. Now we introduce another mechanism for adding members to classes: prototype objects. When new a function, the members of the object will be automatically assigned to the created object. For example:
The following is a code snippet:
<script language="JavaScript" type="text/javascript">
<!--
//Define a class function class1(){ with only one attribute prop
this.prop=1;
}
//Use the prototype attribute of the function to define new members for the class class1.prototype.showProp=function(){
alert(this.prop);
}
//Create an instance of class1 var obj1=new class1();
//Call the showProp method defined through the prototype prototype object obj1.showProp();
//-->
</script>
Prototype is a JavaScript object that can add, modify, and delete methods and properties to the prototype object. This adds member definitions to a class.
Now that we understand the prototype object of the function, let’s look at the execution process of new.
(1) Create a new object and let this pointer point to it;
(2) Assign all members of the function's prototype object to this new object;
(3) Execute the function body and initialize the object;
(4) ) returns the object created in (1).
Compared with the execution process of new introduced in the previous section, there is an additional process of using prototype to initialize the object. This is also consistent with the literal meaning of prototype, which is the prototype of the instance of the corresponding class. This initialization process occurs before the function body (constructor) is executed, so the properties and methods defined in the prototype can be called inside the function body. For example:
The following is a code snippet:
<script language="JavaScript" type="text/javascript">
<!--
//Define a class with only one attribute prop
function class1(){
this.prop=1;
this.showProp();
}
//Use the prototype attribute of the function to define new members for the class
class1.prototype.showProp=function(){
alert(this.prop);
}
//Create an instance of class1
var obj1=new class1();
//-->
</script>
Compared with the previous code, here the method showProp defined in prototype is called inside class1, so that a dialog box pops up during the construction process of the object, showing that the value of the prop attribute is 1.
It should be noted that the definition of the prototype object must be before the statement that creates the class instance, otherwise it will not work. For example:
The following is a code snippet:
<script language="JavaScript" type="text/javascript">
<!--
//Define a class with only one attribute prop
function class1(){
this.prop=1;
this.showProp();
}
//Create an instance of class1
var obj1=new class1();
//Use the prototype attribute of the function to define new members for the class after the statement that creates the instance. This will only be effective for objects created later.
class1.prototype.showProp=function(){
alert(this.prop);
}
//-->
</script>
This code will generate a runtime error, indicating that the display object does not have a showProp method because the method is defined after the statement that instantiates a class.
It can be seen that the prototype object is dedicated to the members of the design class. It is closely related to a class. In addition, prototype also has an important attribute: constructor, which represents a reference to the constructor. For example:
The following is the code Snippet:
function class1(){
alert(1);
}
class1.prototype.constructor(); //Call the constructor of the class
After this code is run, a dialog box will appear with the text "1" displayed on it. This shows that a prototype is closely related to the definition of a class. Actually: class1.prototype.constructor===class1.
A design pattern for JavaScript classes.
We have already introduced how to define a class and how to initialize an instance of a class. The class can add members to the function body defined by function, and can also use prototype to define members of the class. The programming code seems confusing. . How to define classes in a clear way? An implementation pattern for a class is given below.
In JavaScript, due to the flexible nature of objects, members can also be added to the class in the constructor, which not only increases flexibility, but also increases the complexity of the code. In order to improve the readability and development efficiency of the code, you can use this way of defining members and use the prototype object instead. In this way, the definition of function is the constructor of the class, which is in line with the implementation of the traditional class: the class name and the constructor name are Same. For example:
Here is the code snippet:
function class1(){
//Constructor
}
//Member definition
class1.prototype.someProperty="sample";
class1.prototype.someMethod=function(){
//Method implementation code
}
Although the above code has made the definition of the class much clearer, each time a property or method is defined, class1.prototype needs to be used. Not only does the code size become larger, but the readability is not enough. For further improvement, you can use the constructor of an untyped object to specify the prototype object to implement the member definition of the class:
The following is a code snippet:
//Define a class class1
function class1(){
//Constructor
}
//Realize the member definition of the class by specifying the 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 members are defined using untyped objects. All properties and methods are implemented in a list and can be initialized at the same time as they are defined. The value of the attribute. This is also more like the implementation of classes in traditional object-oriented languages. It’s just that the constructor and class member definitions are divided into two parts. This can be regarded as a fixed pattern for defining classes in JavaScript, which will make it easier to understand when using it.
Note: References between members of a class must be made through this pointer. For example, in the someMethod method in the above example, if you want to use the attribute someProperty, you must pass the form of this.someProperty, because in JavaScript each property and methods are independent, they are connected to an object through this pointer.