继承学习心得

万物皆对象，函数也是对象的一种，函数有原型对象，我们可以通过原型对象来继承其他对象的属性跟方法，比如，我们构造一个具有拖拽功能的函数对象：

function DragBox(boxId) {
    if (boxId == undefined) {
        return;
    }
    this.ele = document.getElementById(boxId);
    var self = this;
    this.ele.onmousedown = function(e) {
        e.preventDefault();
        self.detaX = e.clientX - self.ele.offsetLeft;
        self.detaY = e.clientY - self.ele.offsetTop;
        self.start();
        
        document.onmouseup = function() {
            self.stop();
        }
    }
}

这个函数中有元素，这个元素自带属性，我们还给这个元素绑定了一个onmousedown的方法或者行为，这个行为又调用了一些功能方法，具体方法为：

// 方法1： 开始
DragBox.prototype.start = function() {
    var self = this;
    document.onmousemove = function(e) {
        var x = e.clientX - self.detaX;
        var y = e.clientY - self.detaY;

        
        self.move(x, y);
            
    }
}

// 方法2： 移动
DragBox.prototype.move = function(x, y) {
    var self = this;
    
    self.ele.style.left = x + "px";
    self.ele.style.top = y + "px";
    
    
}

// 方法3： 停止
DragBox.prototype.stop = function() {
    document.onmousemove = null;
}

以上这个拖拽功能函数只是具有普通的拖拽功能，现在我们在HTML中布局三个盒子，其样式跟结构的代码如下：