用一个拖拽效果,理清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")
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值