ES6新特性之类(Class)和继承(Extends)相关概念与用法分析

下面是关于ES6中类（class）和继承（extends）的详细讲解：

什么是类（class）

类（class）是ES6中的一个新特性，是一种对象构造器，它可以通过类来创建对象，其语法定义如下：

class MyClass {
  // 类的构造方法，当通过new关键字实例化类对象时，会调用这个方法来初始化对象的属性
  constructor(args) {
    // 初始化属性
  }

  // 原型方法，可以通过类的实例来调用
  methodName(args) {
    // 方法体
  }

  // 静态方法，可以通过类本身来调用
  static staticMethodName(args) {
    // 方法体
  }
}

上面的代码定义了一个名为MyClass的类，其中包含一个构造方法和两个方法，一个是原型方法，一个是静态方法。

类的继承（Extends）

继承是面向对象编程中的一个重要概念，子类可以“继承”父类的属性和方法，并且还可以根据需要添加自己的属性和方法。在ES6中，通过extends关键字可以实现类的继承，其语法定义如下：

class SubClass extends BaseClass {
  constructor(args) {
    // 调用父类的构造方法
    super(args);
    // 初始化子类的属性
  }

  // 子类的原型方法
  subClassMethod(args) {
    // 方法体
  }
}

上面的代码定义了一个名为SubClass的子类，它继承了BaseClass类的所有属性和方法，并且还自己添加了一个subClassMethod方法。

示例说明

下面我们来看看实际应用中类和继承的用法。

示例一：定义一个Animal类和一个Dog类继承Animal类，实现“狗叫”的功能

class Animal {
  constructor(name) {
    // 初始化动物的名字
    this.name = name;
  }

  // 动物叫的方法
  yell() {
    console.log(`${this.name}在叫`);
  }
}

class Dog extends Animal {
  constructor(name) {
    // 调用父类的构造方法
    super(name);
  }

  // 狗叫的方法
  bark() {
    console.log(`${this.name}在汪汪叫`);
  }
}

let dog = new Dog('小黑');
dog.bark(); // 输出 '小黑在汪汪叫'
dog.yell(); // 输出 '小黑在叫'

上面的代码定义了一个Animal类和一个Dog类，其中Dog类继承了Animal类，并实现了自己的bark()方法。通过这两个类的实例，我们可以分别输出“狗叫”的信息和“动物叫”的信息。

示例二：实现一个拖拽的功能

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #f00;
  }
</style>

<div class="box"></div>

<script>
  class Drag {
    constructor(ele) {
      this.ele = ele;
      ele.addEventListener('mousedown', this.handleMouseDown);
      ele.addEventListener('mousemove', this.handleMouseMove);
      ele.addEventListener('mouseup', this.handleMouseUp);
    }

    handleMouseDown = (e) => {
      this.isDragging = true;
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.originX = this.ele.offsetLeft;
      this.originY = this.ele.offsetTop;
    }

    handleMouseMove = (e) => {
      if (this.isDragging) {
        const x = e.clientX - this.startX + this.originX;
        const y = e.clientY - this.startY + this.originY;
        this.ele.style.left = `${x}px`;
        this.ele.style.top = `${y}px`;
      }
    }

    handleMouseUp = () => {
        this.isDragging = false;
    }
  }

  let box = document.querySelector('.box');
  let drag = new Drag(box);
</script>

上面的代码实现了一个拖拽的功能。我们定义了一个Drag类，通过监听鼠标事件，在鼠标按下时记录鼠标的起始位置和要拖拽元素的初始位置，在鼠标移动时计算出要拖拽元素的新位置，并设置其left和top样式来实现拖拽效果。最后，在鼠标抬起时停止拖拽。通过实例化Drag类，我们可以将指定元素设置为可拖拽的。