js反射機制

什麼是反射機制
反射機制指的是程序在運行時可以獲取自身的信息。例如一個對象可以在運行時知道本身有哪些方法和屬性。javascript

在JavaScript中利用for(…in…)語句實現反射
在JavaScript中有一個很方便的語法來實現反射,即for(…in…)語句,其語法以下:
for(var p in obj){
      //語句
}
這裏var p表示聲明的一個變量,用以存儲對象obj的屬性(方法)名稱,有了對象名和屬性(方法)名,就可使用方括號語法來調用一個對象的屬性(方法):
for(var p in obj){
      if(typeof(obj[p]=="function"){
             obj[p]();
      }else{
             alert(obj[p]);
      }
}
這段語句遍歷obj對象的全部屬性和方法,遇到屬性則彈出它的值,遇到方法則馬上執行。在後面能夠看到,在面向對象的JavaScript程序設計中,反射機制是很重要的一種技術,它在實現類的繼承中發揮了很大的做用。

使用反射來傳遞樣式參數
在Ajax編程中,常常要能動態的改變界面元素的樣式,這能夠經過對象的style屬性來改變,好比要改變背景色爲紅色,能夠這樣寫:
element.style.backgroundColor="#ff0000";
其中style對象有不少屬性,基本上CSS裏擁有的屬性在JavaScript中都可以使用。若是一個函數接收參數用用指定一個界面元素的樣式,顯然一個或幾個參數是不能符合要求的,下面是一種實現:
function setStyle(_style){
      //獲得要改變樣式的界面對象
      var element=getElement();
      element.style=_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中的相應屬性的值。從而,element中僅改變指定的樣式,而其餘樣式不會改變,獲得了所要的結果。java

 

js 簡易反射類編程

<script type="text/javascript">
//反射類
function Reflector()
{
    Reflector.getType=function(obj)
    {
        if (obj == null) {
            return null;
        } else if (obj instanceof Object) {
            return obj.constructor;
        } else if (obj.tagName != null) { 
            return obj.tagName;
        } else {
            return typeof(obj);
        }
    }
    Reflector.getAttributes=function(obj)
    {
        var methods = new Array();
        for (key in obj) {
            methods.push(new Type(obj[key], this.getType(obj[key]), key));
        }
        return methods;
    }
    Reflector.getAttributeNames=function(obj)
    {
        var methods = new Array();
        for (key in obj) {
            methods.push(key);
        }
        return methods;
    }
}
function Type(entity, type, name)
{
    this.Entity = entity;
    this.Type = type;
    this.Name = name;
}
函數


//使用示例
var oRef = new Reflector();
var arrRef = Reflector.getAttributes(obj);
var str = '';
for(var i=0;i<arrRef.length;i++)
{
    str += arrRef[i].Type+" : "+arrRef[i].Name+"/n";
}
alert(str);
</script>
this

相關文章
相關標籤/搜索