An example of JavaScript reflection

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. 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 ):

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:

Function setStyle (_ style) {// get the interface object 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:

var style={      color:#ffffff,      backgroundColor:#ff0000,      borderWidth:2px}

In this case, you can call the function: setStyle (style );

Or you can directly write it as setStyle ({color: # ffffff, backgroundColor: # ff0000, borderWidth: 2px });

This Code does not seem to have any problems, but in fact, the setStyle function uses the parameter _ style as the element. when a style value is assigned, 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:

Function setStyle (_ style) {// get the interface object 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.