初学js者对javascript面向对象的认识分析

时间:2022-03-22 14:06:45

代码如下:


var obj = document.getElementById("name"); 
function clickMe() { 
alert(this.value); 
this.value += "!!!!"; 
alert(this.value); 

var ActionBinder = function() {//定义一个类 

ActionBinder.prototype.registerDOM = function(doms) { 
this.doms = doms;//注册doms 

ActionBinder.prototype.registerAction = function(handlers) { 
this.handlers = handlers;//注册一个动作 

ActionBinder.prototype.bind = function() { 
this.doms.onclick = this.handlers 
}//注册doms的动作 
var binder = new ActionBinder();//按照ActionBinder的方法新建一个类 
binder.registerDOM(obj); 
binder.registerAction(clickMe); 
binder.bind(); 


先上一段用js写的面向对象的代码,先建立一个ActionBinder的类,写法上也类似于java;因为js是基于html的dom对象来操作html的内容,在类中定义一个注册dom的方法registerDOM,用prototype将该方法原型化,方便调用;另外再增加一个注册事件的方法registerAction,也用prototype方法原型化;最后再用一个原型化的动作bind将已注册的dom和已注册的事件绑定在了一起,并执行。 
再上一段原始的js代码片段: 
Code 

复制代码代码如下:


<body> 
<script> 
document.onload= function(){ 
var obj = document.getElementById("name"); 
obj.onclick = function(){alert(this.value);} 

</script> 
<input type="text" id="name" /> 
</body> 


代码也实现了要的效果,对于一些简单的应用,上面那段效果能够满足,但对于比较复杂的一些程序,应用起来就比较麻烦,代码上写起来也较繁琐;如代码片段 
Code 

复制代码代码如下:


<body> 
<script> 
document.onload= function(){ 
obj1 = document.getElementById("name1"); 
obj2 = document.getElementById("name2"); 
obj3 = document.getElementById("name3"); 
obj1.onclick = function(){alert(this.value);} 
obj2.onclick = function(){alert(this.value);} 
obj3.onclick = function(){alert(this.value);} 

</script> 
<input type="text" id="name1" value="111" /> 
<input type="text" id="name2" value="222" /> 
<input type="text" id="name3" value="333" /> 
</body> 


或者 
Code 

复制代码代码如下:


<body> 
<script> 
function clickMe(){alert(this.value);} 
</script> 
<input type="text" id="name1" value="111" onclick="return clickMe()" /> 
<input type="text" id="name2" value="222" onclick="return clickMe()" /> 
<input type="text" id="name3" value="333" onclick="return clickMe()" /> 
</body> 


当然上面两段代码也有其他一些更简单的写法,总的来说还是出现很多冗余的代码。 
用面向对象的方法写就比较灵活,如 
Code 

复制代码代码如下:


<body> 
<script> 
window.onload = function() { 
var objs = document.getElementsByTagName("input"); 
function clickMe() { 
alert(this.value); 

var ActionBinder = function() {//定义一个类 

ActionBinder.prototype.registerDOM = function(doms) { 
this.doms = doms;//注册doms 

ActionBinder.prototype.registerAction = function(handlers) { 
this.handlers = handlers;//注册一个动作 

ActionBinder.prototype.bind = function() { 
this.doms.onclick = this.handlers 
}//注册doms的动作 
for (var i=0;i<objs.length;i++ ){ 
var binder = new ActionBinder();//按照ActionBinder的方法新建一个类 
binder.registerDOM(objs[i]); 
binder.registerAction(clickMe); 
binder.bind(); 
}; 

</script> 
<input type="text" id="name" value="111"/> 
<input type="text" id="name1" value="222"/> 
<input type="text" id="name2" value="333"/> 
</body> 


这样就不会有冗余的代码,而且js逻辑上也比较清爽,对于多个事件的绑定还有待研究。