ES6-Class类下

前面super的源码：

查看代码

    <script>
      // 1.作为函数调用
      // 代表父类的构造方法，只能用在子类的构造方法中，用在其他地方就会报错
      // super 虽然代表了父类的构造方法，但是内部的 this 指向子类的实例
      // class Person {
      //   constructor(name) {
      //     this.name = name;

      //     console.log(this);
      //   }
      // }
      // class Programmer extends Person {
      //   constructor(name, sex) {
      //     super(name, sex);
      //   }

      //   // hi() {
      //   //   super(); // ×
      //   // }
      // }
      // // new Person();
      // new Programmer();

      // 2.作为对象使用
      // 2.1.在构造方法中使用或一般方法中使用
      // super 代表父类的原型对象 Person.prototype
      // 所以定义在父类实例上的方法或属性，是无法通过 super 调用的
      // 通过 super 调用父类的方法时，方法内部的 this 指向当前的子类实例
      // class Person {
      //   constructor(name) {
      //     this.name = name;

      //     console.log(this);
      //   }

      //   speak() {
      //     console.log('speak');
      //     // console.log(this);
      //   }

      //   static speak() {
      //     console.log('Person speak');
      //     console.log(this);
      //   }
      // }
      // class Programmer extends Person {
      //   constructor(name, sex) {
      //     super(name, sex);

      //     // console.log(super.name);
      //     // super.speak();
      //   }

      //   // hi() {
      //   //   super(); // ×
      //   // }

      //   speak() {
      //     super.speak();
      //     console.log('Programmer speak');
      //   }

      //   // 2.2.在静态方法中使用
      //   // 指向父类，而不是父类的原型对象
      //   // 通过 super 调用父类的方法时，方法内部的 this 指向当前的子类，而不是子类的实例
      //   static speak() {
      //     super.speak();
      //     console.log('Programmer speak');
      //   }
      // }
      // // new Person();
      // // new Programmer();
      // Programmer.speak();

      // 3.注意事项
      // 使用 super 的时候，必须显式指定是作为函数还是作为对象使用，否则会报错
      class Person {
        constructor(name) {
          this.name = name;
        }

        speak() {
          console.log('speak');
        }
      }
      class Programmer extends Person {
        constructor(name, sex) {
          super(name, sex);

          // console.log(super);
          // console.log(super());
          // console.log(super.speak);
        }
      }
    </script>

七。class的应用

通过键盘左右键切换幻灯片

应用思路：

基类写底层都适用的功能，上一张下一张切换这种、比如pc端幻灯片，移动端幻灯片继承基类，子类中写具体pc端代码或者移动端代码

基类constructor里面传两个形参，接收slider 这个DOM元素以及用户参数（用户没有传参就用默认参数），然后子类继承父类，子类的构造方法中执行super（），调用父类的构造方法，执行里面的函数体，里面实现了切换图片的部分逻辑；子类的构造方法中添加this.a()

 

在子类中添加方法a，该方法执行后，就给左右箭头注册了事件；