用一个拖拽效果，理清ES6和ES5继承

ES5和ES6的继承方式 一个拖拽效果，理清继承！

链接

若是对于构造函数，和class类不清晰的时候，无妨看看这一篇基础文章
链接: link.

ES6继承

• 原理：
  • 01：使用extends去继承父类
  • 02：假如父类有构造函数，则需要使用super去继承这个父类的构造函数！
    需求：使用ES6继承的方式，来实现子类继承父类的拖拽效果，并且自己自带边界判断（父类没有边界判断）！

    class Drag {
      constructor(selector) {
        this.ele = document.querySelector(selector)
        this.bindEvent();
      }

      bindEvent() {
        let self = this;
        document.onmousedown = function (evt) {
          let e = evt || event
          let {
            offsetX: x,
            offsetY: y
          } = e
          document.onmousemove = function (evt) {
            let e = evt || event;
            self.eleMove(e.clientX - x, e.clientY - y);
          }
        }
        document.onmouseup = function () {
          document.onmousemove = null;
        }
      }

      eleMove(x, y) {
        this.ele.style.left = x + "px";
        this.ele.style.top = y + "px";
      }
    }

    // new Drag("#box")
    class sonDrag extends Drag { //01：使用extends去继承父类 
      constructor(selector) {
        super(selector) // 02：假如父类有构造函数，则需要使用super去继承这个父类的构造函数！
      }

      eleMove(x, y) {
        // console.log(innerWidth, innerHeight);  console.log(this.ele.offsetWidth);
        //最小值的判断
        x = x < 0 ? 0 : x;
        y = y < 0 ? 0 : y;
        //最大值的判断
        x = x > innerWidth - this.ele.offsetWidth ? innerWidth - this.ele.offsetWidth : x;
        y = y > innerHeight - this.ele.offsetHeight ? innerHeight - this.ele.offsetHeight : y;
        this.ele.style.left = x + "px";
        this.ele.style.top = y + "px";
      }
    }
    const son = new sonDrag("#box");

ES继承的方式1 => 使用强制改变this指向结合for in 遍历方式：

原理：

• 01：在son的构造函数之内，调用父构造函数，前行改变this的指向到son
• 02：假如父构造函数存在原型方法，那么需要继承这个父构造函数的原型对象 => 通过for in 遍历原型对象，给son的原型对象
  也就是说，遍历到父构造函数的方法，然后在赋值给子构造函数，于是达到继承的效果！
  需求：使用ES5继承的方式，来实现子类继承父类的拖拽效果，并且自己自带边界判断（父类没有边界判断）！

  function Drag(selector) {
      this.ele = document.querySelector(selector)
      this.bindEvent();
    }

    Drag.prototype.bindEvent = function () {
      let self = this;
      document.onmousedown = function (evt) {
        let e = evt || event
        let {
          offsetX: x,
          offsetY: y
        } = e
        document.onmousemove = function (evt) {
          let e = evt || event;
          self.eleMove(e.clientX - x, e.clientY - y);
        }
      }
      document.onmouseup = function () {
        document.onmousemove = null;
      }
    }

    Drag.prototype.eleMove = function (x, y) {
      this.ele.style.left = x + "px";
      this.ele.style.top = y + "px";
    }

    // new Drag("#box")

    function sonDrag(selector) { //01：继承父构造函数
      var son_this = this;
      Drag.call(son_this, selector)
    }
    //02：继承父构造函数的方法
    for (var key in Drag.prototype) {
      sonDrag.prototype[key] = Drag.prototype[key]
    }
    sonDrag.prototype.eleMove = function (x, y) {
      // console.log(innerWidth, innerHeight);  console.log(this.ele.offsetWidth);
      //最小值的判断
      x = x < 0 ? 0 : x;
      y = y < 0 ? 0 : y;
      //最大值的判断
      x = x > innerWidth - this.ele.offsetWidth ? innerWidth - this.ele.offsetWidth : x;
      y = y > innerHeight - this.ele.offsetHeight ? innerHeight - this.ele.offsetHeight : y;
      this.ele.style.left = x + "px";
      this.ele.style.top = y + "px";
    }
    new sonDrag("#box")

ES5的继承方式2 =>把父构造函数的实例对象给与子构造函数的原型对象

• 01：在son的构造函数之内，调用父构造函数，前行改变this的指向到son
• 02：假如父构造函数存在原型方法，那么需要继承这个父构造函数的原型对象
  => 通过父构造函数的实例对象（指向的是原型对象），赋值给子构造函数的原型对象
  也就是说，值构造函数得到这个函数地址后，也是指向的是父构造函数的原型对象（那么可以继承它的方法）
• 需求：使用ES5继承的方式，来实现子类继承父类的拖拽效果，并且自己自带边界判断（父类没有边界判断）！

  function Drag(selector) {
      this.ele = document.querySelector(selector)
      this.bindEvent();
    }

    Drag.prototype.bindEvent = function () {
      let self = this;
      document.onmousedown = function (evt) {
        let e = evt || event
        let {
          offsetX: x,
          offsetY: y
        } = e
        document.onmousemove = function (evt) {
          let e = evt || event;
          self.eleMove(e.clientX - x, e.clientY - y);
        }
      }
      document.onmouseup = function () {
        document.onmousemove = null;
      }
    }

    Drag.prototype.eleMove = function (x, y) {
      this.ele.style.left = x + "px";
      this.ele.style.top = y + "px";
    }

    // new Drag("#box")

    function sonDrag(selector) { //01：继承父构造函数
      var son_this = this;
      Drag.call(son_this, selector)
    }
    sonDrag.prototype = new Drag("#box");
    sonDrag.prototype.eleMove = function (x, y) {
      // console.log(innerWidth, innerHeight);  console.log(this.ele.offsetWidth);
      //最小值的判断
      x = x < 0 ? 0 : x;
      y = y < 0 ? 0 : y;
      //最大值的判断
      x = x > innerWidth - this.ele.offsetWidth ? innerWidth - this.ele.offsetWidth : x;
      y = y > innerHeight - this.ele.offsetHeight ? innerHeight - this.ele.offsetHeight : y;
      this.ele.style.left = x + "px";
      this.ele.style.top = y + "px";
    }
    new sonDrag("#box")