初學js者對javascript物件導向的認識分析，需要學習的朋友可以參考下。複製代碼代碼如下:
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 ，用pr ototype將此方法原型化，方便呼叫；另外再增加一個註冊事件的方法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邏輯上也比較清爽，多個事件的綁定還有待研究。