Es6新增的Class及class继承

class构造函数写法

若用Es6新增的class来构造函数，则需要考虑兼容问题,要是用高版本的浏览器。
那么如何用class来面对对象构造函数呢，下来来个小例子

下面这是工厂模式的面对对象构造函数写法

function Fn(){
this.name=“have a try”;
}
Fn.prototype.show=function(){};
var f=new Fn();
console.log(f);

下面这是class的写法

class Fn2(){
constructor(){
this.name=“have a try”;
}
show(){};
}
var f2=new Fn2();
console.log(f2);

class的继承

下面用拖拽盒子来写一个案例来体现class的继承
在页面上创建两个盒子，一个拖拽有边界，另一个没有，可以被脱出浏览器可是窗口外
这是css部

 .box1{width:100px;
              height:100px;
              background: black;
              position: absolute;
              left:0;
              top:0;
              color: white;
              text-align: center;
              font-size: 20px;
              line-height: 100px;
               }
               
               
         .box2{width:100px;
              height:100px;
              background: white;
              position: absolute;
              left:0;
              top:110px;
              color: black;
              text-align: center;
              font-size: 20px;
              line-height: 100px;
              border: 1px solid black;
             }

html部分

    <div class="box1">我出的去</div>
    <div class="box2">我出不去啊</div>

接下来就是js代码

 class Drag{
        constructor(ele){
            this.ele = ele;

            this.m = this.move.bind(this);
            this.u = this.up.bind(this);

            this.addEvent();
        }
        
         //添加事件   
        addEvent(){
            this.ele.addEventListener("mousedown",this.down.bind(this))
        }
        
        //当鼠标点下的时候
        down(eve){
            var e = eve || window.event;
            
            //鼠标相对事件源坐标
            this.x = e.offsetX;
            this.y = e.offsetY;
            //执行鼠标移动和鼠标抬起事件
            document.addEventListener("mousemove",this.m);
            document.addEventListener("mouseup",this.u);

            
            //取消默认事件
            e.preventDefault();
        }
        
        //拖拽物体的坐标  鼠标相对页面可视区域-鼠标相对事件源坐标
        move(eve){
            var e = eve || window.event;
            this.ele.style.left = e.clientX - this.x + "px";
            this.ele.style.top = e.clientY - this.y + "px";
        }
        //鼠标抬起时，删除之前的鼠标按下和鼠标移动时间，一次拖拽完成了
        up(){
            document.removeEventListener("mousemove",this.m)
            document.removeEventListener("mouseup",this.u)
        }
    }


    class SmallDrag extends Drag{
        constructor(ele) {
            super(ele)
        }
        
        //重新定义原型move
        move(eve){
            var e = eve || window.event;

            //x是鼠标相对页面可视区域-鼠标相对事件源坐标
            var x = e.clientX - this.x;
            var y = e.clientY - this.y;
            //出边界，则限定在边界
            if(x<0){
                x=0
            }
            if(y<0){
                y=0
            }
           //鼠标相对页面可视区域-鼠标相对事件源坐标>页面的可视区域的宽-box的可视区域内容的宽
            if(x > clientW - w){
            x = clientW - w;
            }
            if(y > clientH - h){
            y = clientH - h;
            }

            this.ele.style.left = x + "px";
            this.ele.style.top = y + "px";
        }
    }

    var obox1 = document.querySelector(".box1");
    var obox2 = document.querySelector(".box2");
    
    //获取页面的可视区域的宽高
    var clientW = document.documentElement.clientWidth;
    var clientH = document.documentElement.clientHeight;
    //第二个要有边界限制，所以获取第二个box的可视区域内容的宽高
    var w=obox2.offsetWidth;
    var h=obox2.offsetHeight;

    //第一个box执行无边界的
    new Drag(obox1);
    //第二个box只有有边界的继承drag有修改过的smallrag
    new SmallDrag(obox2);

    // 继承的应用场景：
    //     多个对象，互相之间有多个功能的重叠，可以使用继承，继承重叠的方法
    //     继承之后，如有差别，可以该别继承之后的方法
</script>