JavaScript遍历对象属性与方法：反射机制与样式应用详解

遍历对象属性与方法的基础实现

为了直观展示运行效果，建议先定义一些属性与方法，否则无法看到实际输出。下文包含具体示例，请仔细阅读。

function ShowObjProperty(Obj)
{ 
var PropertyList='';
var PropertyCount=0;
for(i in Obj){
if(Obj.i !=null)
PropertyList=PropertyList+i+'属性：'+Obj.i+'\r\n';
else
PropertyList=PropertyList+i+'方法\r\n';
} 
alert(PropertyList);
} 

 
<script type="text/javascript">
// 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent。
var myObject = new Object();
myObject.sitename = "布啦布啦";
myObject.siteurl = "blabla.cn";
myObject.sitecontent = "网页教程代码图库的中文站点";
//遍历对象的所有属性
for (prop in myObject)
{ 
document.write("属性 '" + prop + "' 为 " + myObject[prop]);
document.write("
"); 
} 
</script>

参考Java Tang博客，找到一种遍历JavaScript对象所有属性名称和值的方法，使用时直观且便捷。代码如下：

 
/* 
* 用来遍历指定对象所有的属性名称和值
* obj 需要遍历的对象
* author: Jet Mah
*/ 
function allPrpos ( obj ) {
// 用来保存所有的属性名称和值
var props = "" ;
// 开始遍历
for ( var p in obj ){
// 方法
if ( typeof ( obj [ p ]) == " function " ){
obj [ p ]() ;
} else {
// p 为属性名称，obj[p]为对应属性的值
props += p + " = " + obj [ p ] + " \t " ;
} 
} 
// 最后显示所有的属性
alert ( props ) ;
} 

JavaScript反射机制与DOM样式应用

在AJAX开发中，JavaScript的反射机制指程序在运行时能获取自身信息，例如对象在运行时知晓其拥有的方法与属性。利用for(…in…)语句即可实现反射，语法如下：

for(var p in obj){

//语句

在Ajax编程中，常需动态改变界面元素样式，可通过对象的style属性实现。例如将背景色设为红色，写法如下：

element.style.backgroundColor="#ff0000";

CSS中支持的属性，在JavaScript中基本均可使用：

 
function setStyle(_style){
//得到要改变样式的界面对象
var element=getElement();
element.style=_style;
} 

直接将整个style对象作为参数传入：

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

此时可这样调用函数：

setStyle(style);

或直接写为：

setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});

该代码看似无误，但在setStyle函数内部将参数_style赋值给element.style时，若element原有样式（如曾执行过：

element.style.height="20px";

而_style中未包含height定义，则element的height样式会丢失，非预期结果。解决此问题可用反射机制重写setStyle函数：

 
function setStyle(_style){
//得到要改变样式的界面对象
var element=getElement();
for(var p in _style){
element.style[p]=_style[p];
} 
} 

程序中遍历_style的每个属性获取名称，再通过方括号语法将element.style中对应属性赋值为_style中的值。从而仅改变指定样式，其他样式保持不变，达到预期效果。