Introduction to the AJAX JavaScript reflection mechanism

What is the reflex mechanism

Reflection refers to the ability of a program to obtain information about itself while it is running. For example, an object can know what methods and properties it has at run time.

Using for(...) in JavaScript in...). Statement implementation reflection

There is a handy syntax for reflection in JavaScript, for(... in...). The syntax of the statement is as follows:

for(var p in obj){
/ / statements
}
Here var p represents a declared variable that stores the property (method) name of the object obj. With the object name and property (method) name, you can use the square bracket syntax to call the property (method) of an object:

for(var p in obj){ 
if(typeof(obj[p]=="function"){ 
obj[p](); 
}else{ 
alert(obj[p]); 
} 
}

This statement iterates through all the properties and methods of the obj object, popping up its value when it encounters a property, and executing the method immediately when it encounters a method. As you'll see later, reflection is an important technique in object-oriented JavaScript programming, and it plays a big role in implementing class inheritance.

Use reflection to pass style parameters

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

element.style.backgroundColor="#ff0000";
style objects have many properties, and almost all the properties in CSS can be used in JavaScript. If a function receives parameters to specify the style of an interface element, it is obvious that one or more parameters cannot meet the requirements. The following is an implementation:

function setStyle(_style){ 
// Gets the interface object to change the style  
var element=getElement(); 
element.style=_style; 
}

In this way, the entire style object is directly passed in as a parameter. The possible form of an style object is:

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

You can call the function like this:

setStyle(style);
Or simply write:

setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});
This code doesn't seem to have any problems, but in fact, if element already has a fixed style when using the parameter _style to assign element.style inside the setStyle function, for example, it has been executed:

element.style.height="20px";
The definition of height is not included in _style, so the height style of element is lost, not the desired result. To solve this problem, you can rewrite the setStyle function using reflection:

function setStyle(_style){ 
// Gets the interface object to change the style  
var element=getElement(); 
for(var p in _style){ 
element.style[p]=_style[p]; 
} 
}

The program iterates through each property of _style to get the name of the property, and then assigns the corresponding property in element.style to the value of the corresponding property in _style using the square bracket syntax. Thus, only the specified style is changed in element and no other style is changed, resulting in the desired result.