继承、多态

继承的应用
这个继承是相当神奇的了！写父类元素用了几十行代码，而这里只用了三行把父类具有的行为动作都继承过来，话说回来这个叫法很贴切呢
这里为了简化代码，构造父类函数时，我们将它封装成一个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
中却是不行的?
今天时间比较紧,就先说这么多,好些还没搞清楚,比如上面的问题,后面还需要再花时间好好弄清楚的嘞!