用组合继承法和ES6继承语法分别写一个拖拽效果

组合继承

首先我们来准备两个盒子，作为操作的对象

创建一个构造函数 Drag ，来实现我们的想要的拖拽效果，首先要先往构造函数的原型上添加方法，即：addEvent()、move()、up() 方法，因为构造函数本身没有这些方法，我们想让你实例去使用这些方法，以及方便之后的继承，只能往原型上去加。

调用这个构造函数，来完成拖拽效果：

因为要演示一下组合继承，所以我们来增加一个需求，给其中一个盒子加上边界限制，也就是不能使它的 left 或 top 小于 0；
假如我们给 box2 添加边界限制，代码要进行以下更改：

如图所示：我增加了一个新的构造函数 SmallDrag ，用它继承了构造函数 Drag 的属性和方法，接下来我来对继承过来的 move（）方法，做一些调整。

因为我在继承时，采用了深拷贝，所以改变新的构造函数在原型上的方法，并不会影响到原方法，用 obox2 来调用 SmallDrag（），就可以实现需求。


红色为box1，绿色为 box2，实现了给box2 添加边界限制的需求。

class继承

如果用 ES6 给我们提供的继承方法，写起来就非常简单了

先写出拖拽的效果，然后通过 extends 和 super关键字实现继承。

直接继承，改变原构造函数里面的 move（）方法，就可以实现给box 添加边界限制的需求，和组合继承相比，省去了大量的继承代码，只用两个关键字就实现了继承。