Introduction to AJAX JavaScript reflection mechanism

What is reflection mechanism?

The reflection mechanism means that the program can obtain its own information at runtime. For example, an object can know its methods and attributes at runtime.

Use (... In ...) Statement reflection

In JavaScript, there is a very convenient syntax for reflection, that is, (... In ...) Statement. Its syntax is as follows:

For (var p in obj ){
// Statement
}
Var p indicates a declared variable, which is used to store the object obj attribute (method) name with the object name and attribute (method) Name, you can use the square brackets syntax to call the attributes (methods) of an object ):

Copy codeThe Code is as follows: for (var p in obj ){
If (typeof (obj [p] = "function "){
Obj [p] ();
} Else {
Alert (obj [p]);
}
}

This statement traverses all the attributes and methods of the obj object. When an attribute is encountered, its value is displayed, and the method is executed immediately. As we can see later, reflection mechanism is an important technology in Object-Oriented JavaScript programming, and it plays a major role in implementing class inheritance.

Use reflection to pass style parameters

In Ajax programming, it is often necessary to dynamically change the style of interface elements, which can be changed through the style attribute of the object. For example, to change the background color to red, you can write as follows:

Element. style. backgroundColor = "# ff0000 ";
The style object has many attributes. Basically, attributes in CSS can be used in JavaScript. If a function receiving parameter uses a style that specifies an interface element, obviously one or more parameters cannot meet the requirements. The following is an implementation:

Copy codeThe Code is as follows: function setStyle (_ style ){
// Obtain the interface object for style change
Var element = getElement ();
Element. style = _ style;
}

In this way, the entire style object is passed in as a parameter. The possible form of a style object is:Copy codeThe Code is as follows: var style = {
Color: # ffffff,
BackgroundColor: # ff0000,
BorderWidth: 2px
}

You can call the function as follows:

SetStyle (style );
Or directly write as follows:

SetStyle ({color: # ffffff, backgroundColor: # ff0000, borderWidth: 2px });
This Code does not seem to have any problems, but in fact, when the setStyle function uses the parameter _ style to assign values to element. style, if the element already has a certain style, for example, it has been executed:

Element. style. height = "20px ";
The _ style does not include the definition of height, so the height style of the element is lost, not the original result. To solve this problem, you can use the reflection mechanism to override the setStyle function:

Copy codeThe Code is as follows: function setStyle (_ style ){
// Obtain the interface object for style change
Var element = getElement ();
For (var p in _ style ){
Element. style [p] = _ style [p];
}
}

In the program, traverse every attribute of _ style to get the attribute name. Then, use the square brackets syntax to assign the corresponding attribute value in element. style to the value of the corresponding attribute in _ style. Therefore, only the specified style is changed in the element, but other styles are not changed. The expected result is obtained.