javascript中的反射機制的應用

在javascript中有一個方便的文法實現反射，即for(...in...)語句，其文法是for(var p in obj){}這裡的p表示聲明了一個變數來儲存obj對象的屬性和方法，有了對象，屬性或者方法可以用如下方式遍曆：

for(var p in obj){

    if(typeof(obj[p])=="function"){

           obj[p]();

}else{

         alert(obj[p]);

}

}

這段語句就遍曆obj對象的所有屬性和方法，如果遇到屬性的話就彈出它的值，遇到方法就立即執行方法。

 

使用反射機制來傳遞樣式參數：

在Ajax編程中，常常會用到動態改變介面元素的樣式，可以通過對象的style屬性來改變如：

//要改變背景色為紅色

element.style.backgroundColor="red";

其中style對象有很多屬性，基本上CSS中的所有屬性都可以在JavaScript中能夠使用，現在考慮如果一個函數接收參數，用以指定一個介面元素的樣式，那麼就需要設計參數的實現方式，顯然一個或者是幾個參數是不能滿足要求的，下面就是一種實現：

function setStyle(styleView){

     var element = getElement();

     element.style=styleView;

}

這樣，直接將整個style對象作為參數傳遞進來了，一個style對象的可能形式可能是：

var style={

      color:red,

      backgroundColor:green,

      borderwidth:2px

}

這時可以直接調用函數：

setStyle(style);

這中方式會出現一個問題：如果element原先就有一個樣式，例如增經執行過：

element.style.height="20px";

而在styleView中沒有對height的定義，因此element的height樣式就丟失了，不是最初想要的結果，要解決這個問題，可以用反射機制來重寫setStyle函數：

function setStyle(styleView){

      var element = getElement();

      for(var p in styleView){

            element.style[p]=style[p];

}

}

程式中遍曆styleView中的每個屬性將其賦值給element的style對象，這樣element中原先有個而在styleView中沒有定義的屬性也得到了儲存，達到了預期的目的。