Stay Hungry,Stay Foolish!

给对象添加方法和属性

　　为了减少所写JS代码对全局环境的污染， 可以采用对象写法来实现命名空间技术，

以使得局部变量和函数都在对象中作为属性存在，它们组成某个主题（对象名称体现）的相关属性和方法的集合。

如下例:

var MyLib = {}; // global Object cointainer
MyLib.value = 1;
MyLib.increment = function() { MyLib.value++; }
MyLib.show = function() { alert(MyLib.value); }

MyLib.value=6;
MyLib.increment();
MyLib.show(); // alerts 7

 　　对象定义中每个属性的定义相对对象松散，优化下：

var MyLib = {
    value:1,
    increment:function() {this.value++; },
    show: function() { alert(this.value); }
};

  

　　如何给已有对象添加属性和方法？

　　优化后的代码是类库的一般写法，直接修改不是合适的，库的内容也不容易修改，修改了也不符合开闭法则；

　　使用优化前的方法 MyLib.xxx = yyy 来实现，可以满足单实例对象， 但是对于多个实例情况，并且多个属性和方法需要添加，

每个实例的待添加的属性和方法又是一致的，方法定义为公共函数， 每个实例都设置一遍所需的属性和方法，着实显得笨重。

　   查阅 apply 和 call 的用法（http://sjolzy.cn/Understanding-JavaScript-in-argumentscalleecallerapply.html），

可以构造一个属性和方法定义函数， 属性和方法的前缀为this.， 然后使用call将this绑定到具体对象上，就实现了对象扩展。



function base() {
    this.member =" dnnsun_Member";
    this.method =function() {
        window.alert(this.value);
    }
}



var extObj = {
    value: 2
}
base.call(extObj);
extObj.method(); // alert 2




 


 


　　不仅仅对于普通的对象生效， 对于DOM对象也是生效的， 且对于已经绑定过的DOM对象，其克隆仍然具备扩展的特性。


下面给出完整测试代码：




<html>
<head>
</head>
<body>
<input id="button" type="button" value="I am a button"/>
<script type='text/javascript'>
// 待扩展函数
function base() {
    this.member =" dnnsun_Member";
    this.method =function() {
        window.alert(this.value);
    }
}

/************ Plain OBJECT *******************/
var extObj = {
    value: 2
}
base.call(extObj);
extObj.method();
/************ Plain OBJECT *******************/


/************ DOM OBJECT *******************/
base.call(document.getElementById("button"));
document.getElementById("button").method()

var node = document.getElementById("button").cloneNode(true);
document.getElementsByTagName("body")[0].appendChild(node);
document.getElementById("button").value += "（clone）";
document.getElementById("button").method();
/************ DOM OBJECT *******************/
</script>
</body>
</html>
 




 


 


 


 


 


 







            

            
posted @ 
2014-05-04 00:28 
lightsong 
阅读(4712) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    



	

	

	
	

	

	

	





    

        
  Life Is Short, We Need Ship To Travel