With the concept of Ajax, JavaScript, as a powerful tool of Ajax, has played a soaring role. The most basic use of JavaScript, as well as syntax, browser objects, and so on are not cumbersome here. Focus on how to implement JavaScript object-oriented programming.
1. Use JavaScript to implement classes
JavaScritpt does not have a special mechanism to implement classes. Here we use its function to allow nesting mechanisms to implement classes. A function can contain variables and other functions. In this way, variables can be used as attributes and internal functions can be used as member methods. Therefore, the outer function itself can be used as a class. As follows:
The Code is as follows:
Function myClass ()
{
// This is equivalent to the constructor.
}
Here, myClass is a class. In fact, we can regard it as a class constructor. The non-constructor section will be described in detail later.
2. How to obtain an instance of a class
When the class is implemented, you can obtain the instance of the class. JavaScript provides a method to obtain the object instance. That is, the new operator. In JavaScript, classes and functions are the same concept. When you use new to operate a function, an object is returned. As follows:
Var obj1 = new myClass ();
3. Reference of object members
There are three methods for referencing a class property or method in JavaScript.
1> point operator
This is the most common reference method and is not cumbersome. The format is as follows:
Object Name. attribute name;
Object Name. method name;
2> Square brackets
JavaScript allows square brackets to reference a member of an object. As follows:
Object Name ["attribute name"];
Object Name ["method name"];
Here, square brackets are strings that represent attributes or method names, not necessarily string constants. You can also use variables. In this way, you can use the variable to pass the attribute or method name. It brings convenience to programming. In some cases, this method can be used when the Code cannot determine the property or method to call. Otherwise, if you use the dot operator, you also need to use the condition judgment to call the attribute or method.
In addition, attributes and method names referenced by square brackets can start with a number or contain spaces. The properties and method names referenced by point numbers follow the rules of the identifier. However, it is generally not recommended to use a non-identifier naming method.
3> Use eval Functions
If you do not want to use variables to pass variables or method names, and do not want to use conditional judgment, the eval function is a good choice. Eval receives a string-type parameter and runs the string as a code in the context to return the execution result. The eval function is used here. As follows:
Alert (eval ("Object Name." + element. value ));
4. Add, modify, and delete object attributes and Methods
In JavaScript, attributes and methods can be dynamically added, modified, and deleted for an object after an object is generated. This is different from other object-oriented languages.
1> Add attributes and Methods
Create an object first. After an empty object is created, there is no property or method. However, we can create it in code.
The Code is as follows:
Var obj1 = new Object ();
// Add attributes
Obj1.ID = 1;
Obj1.Name = "johnson ";
// Add Method
Obj1.showMessage = function ()
{
Alert ("ID:" + this. ID + ", Name:" + this. Name );
}
2> modify attributes and Methods
Similar to adding attributes and methods, for example, the preceding example:
The Code is as follows:
// Modify attributes
Obj1.ID = 2;
Obj1.Name = "Amanda ";
// Modification method
Obj1.showMessage = function ()
{
Alert ("ID:" + this. ID ");
}
3> Delete attributes and Methods
You can directly assign the attribute or method to be deleted to undefined:
The Code is as follows:
Obj1.ID = 1;
Obj1.Name = undefined;
Obj1.showMessage = undefined;
5. Create a non-type object.
Similar to Anonymous Types in C #3.0, JavaScript can also create non-type objects. The format is as follows:
The Code is as follows:
Var obj1 = {};
Var obj2 =
{
ID: 1,
Name: "Johnson ",
ShowMessage: function ()
{
Alert ("ID:" + this. ID + "Name:" + this. Name );
}
}
Two non-typed objects, obj1 and obj2, are defined here. Obj1 is an empty object. Obj2 includes two attributes: ID, Name, and showMessage. Each attribute and method is separated by a comma. The attribute (method) name and its value are separated by semicolons.
When you create an attribute method in this way, you can also use a string to define the name of the attribute method. For example:
The Code is as follows:
Var obj2 =
{
"ID": 1,
"Name": "Johnson"
}
6. prototype
Each function object has a subobject prototype. Because a function can also represent classes, prototype represents a set of class members. When a new object is created, members of the prototype object are converted into members of the object. Let's take a look at an example:
The Code is as follows:
Function myClass ()
{}
MyClass. prototype. ID = 1;
MyClass. prototype. Name = "johnson ";
MyClass. prototype. showMessage = function ()
{
Alert ("ID:" + this. ID + "Name:" + this. Name );
}
Var obj1 = new myClass ();
Obj1.showMessage ();
Creating classes using prototype objects has one benefit. If you write all the members directly in the class declaration, as follows:
The Code is as follows:
Function myClass ()
{
// Add attributes
This. ID = 1;
This. Name = "johnson ";
// Add Method
This. showMessage = function ()
{
Alert ("ID:" + this. ID + ", Name:" + this. Name );
}
}
Var obj1 = new myClass ();
Var obj2 = new myClass ();
In the above Code, a class myClass is defined, and two attributes and a method are directly defined in the class. Two objects are instantiated. The two attributes and a method are created once every time a myClass object is created, which wastes the memory space. After prototype is used, this problem can be solved. When a new function is used, the members of its prototype object are automatically assigned to this object, and multiple new objects are not created repeatedly.
Because prototype initialization occurs before the function body is executed, use the following code to prove it:
The Code is as follows:
Function myClass ()
{
// This is equivalent to the constructor.
This. ID = 1;
This. Name1 = this. Name;
This. showMessage ();
}
MyClass. prototype. Name = "johnson ";
MyClass. prototype. showMessage = function ()
{
Alert ("ID:" + this. ID + ", Name:" + this. Name );
}
Var obj1 = new myClass ();
After executing the above code, you can find that a dialog box is displayed when the object of the new type is displayed.
The last thing to mention is that prototype has a method that is used in object-oriented design. That is, the constructor attribute is a call to the constructor. The constructor here is the code in the declaration of the class mentioned above. For example:
The Code is as follows:
Function myClass ()
{
// This is equivalent to the constructor.
Alert ("this is in constructor ");
}
MyClass. prototype. constructor ();
Var obj1 = new myClass ();
After executing the above Code, you will find that the dialog box appears twice. It can be seen that prototype can be used specially for design class members. In fact, prototype is often used in JavaScript object-oriented design.
