继承的应用
这个继承是相当神奇的了！写父类元素用了几十行代码，而这里只用了三行把父类具有的行为动作都继承过来，话说回来这个叫法很贴切呢
这里为了简化代码，构造父类函数时，我们将它封装成一个js文件
原型
找原型对象有2个办法：
1.构造函数名.prototype
2.对象名.proto
<script src="DragBox.js"></script>
new DragBox("box1");
它的作用是完成拖拽，包括开始（按键按下，移动）、停止两个过程。那么我只需要new DragBox（）并且给它传一个参数，就能实现，你想new几个new几个，简直酷毙。
多态效果
这里想实现多态效果，那我们再构造一个函数，作用是在父类的基础上添加东西，比如在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
中却是不行的?
今天时间比较紧,就先说这么多,好些还没搞清楚,比如上面的问题,后面还需要再花时间好好弄清楚的嘞!
