繼承的應(yīng)用
這個繼承是相當神奇的了梦抢！寫父類元素用了幾十行代碼，而這里只用了三行把父類具有的行為動作都繼承過來愧哟，話說回來這個叫法很貼切呢
這里為了簡化代碼奥吩，構(gòu)造父類函數(shù)時，我們將它封裝成一個js文件
原型
找原型對象有2個辦法：
1.構(gòu)造函數(shù)名.prototype
2.對象名.proto
<script src="DragBox.js"></script>
new DragBox("box1");
它的作用是完成拖拽蕊梧，包括開始（按鍵按下霞赫，移動）、停止兩個過程肥矢。那么我只需要new DragBox（）并且給它傳一個參數(shù)端衰，就能實現(xiàn)，你想new幾個new幾個甘改，簡直酷斃旅东。
多態(tài)效果
這里想實現(xiàn)多態(tài)效果，那我們再構(gòu)造一個函數(shù)十艾，作用是在父類的基礎(chǔ)上添加東西抵代，比如在div中顯示文本，控制它的拖拽范圍等等
1.添加顯示文本
function DragBoxText(boxId) {
// 繼承 DragBox 的屬性
DragBox.call(this, boxId);
}
// 繼承 DragBox 的方法(開始忘嫉、停止)
DragBoxText.prototype = new DragBox();
// 修改了父親了的方法
DragBoxText.prototype.move = function(x, y) {
//this.ele.style.left = x + "px";
//this.ele.style.top = y + "px";
DragBox.prototype.move.call(this, x, y)
this.ele.innerHTML = "left:"+x + " " + "top:"+y;
}
new DragBoxText("box2");
2.控制活動范圍（不能離開左上邊界等）
function DragBoxNotOut(boxId) {
// 繼承 DragBox 的屬性
DragBox.call(this, boxId);
}
// 繼承 DragBox 的方法(開始荤牍、停止)
DragBoxNotOut.prototype = new DragBox();
// 修改了父親了的方法
DragBoxNotOut.prototype.move = function(x, y) {
this.ele.style.left = x + "px";
this.ele.style.top = y + "px";
if(x<0){
this.ele.style.left = 0+ "px";
}
if(y<0){
this.ele.style.top = 0 + "px";
}
}
new DragBoxNotOut("box1");
這樣一來,我們就有了三個div,它們都具有拖拽功能,同時會具有自己的額外個性.
疑惑
這里在修改父類move方法時遇到 一個疑惑:
DragBoxText.prototype.move = function(x, y) {
//this.ele.style.left = x + "px";
//this.ele.style.top = y + "px";
DragBox.prototype.move.call(this, x, y)
this.ele.innerHTML = "left:"+x + " " + "top:"+y;
}
注銷了//this.ele.style.left = x + "px";
//this.ele.style.top = y + "px";
以后還可以移動div,而在
DragBoxNotOut.prototype.move
中卻是不行的?
今天時間比較緊,就先說這么多,好些還沒搞清楚,比如上面的問題,后面還需要再花時間好好弄清楚的嘞!
