初學js者對javascript物件導向的認識分析

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

複製代碼代碼如下: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邏輯上也比較清爽，對於多個事件的綁定還有待研究。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More