ES6-Class类上

一。基础认知

构造方法有点类似构造函数，前面学的构造函数是模拟类的，ES6用类即可

不能直接调用Person（）报错，和构造函数不同，构造函数不加new调用也不报错；

一般在constructor里面加一些初始化的东西；

实例的属性在构造方法里添加，方法不能，因为多个实例就有多个函数会开辟多个内存

不同对象属性应该不一样，但是方法可以公用，传不同参数即可

class类里构造方法和实例方法语法都要用对象里方法的简洁表示法，去掉冒号和function，但是注意没有逗号和分号

在构造方法外添加实例能使用的方法有两种（添加到类原型上和添加到实例本身上）一个是fn：function() {}  和赋值表示法 fn = function() {},我们这里用第一个的简洁表示法添加到类的原型上共享，因为第二个在给实例添加方法是真添加到实例身上，浪费内存

注意，构造函数外写的属性age sex（非方法）是不会加到原型上，方法仅限于简洁表示法才能添加到原型上，构造方法里面的属性方法都是加到实例上；类里面给实例添加的属性或者类本身的属性都只能用等号的方式添加（构造函数中前面要有this）；不能用age：12或者static age ：12；

注意下面的getSex和speak都是方法名，是字符串，不是变量名

也就是说只要写在构造方法外的和写在构造方法里的格式只要是一样（都是赋值表示法，唯一的区别就是省略了this.），那么他们都是给实例本身添加

检测Person类型是function，证明底层还是构造函数的原理

---

本质上方法也是加在构造函数（类）的prototype对象上，和构造函数类似

    <script>
      // 1.认识 Class
      // 人类：类
      // 具体的人：实例、对象

      // 类可以看做是对象的模板，用一个类可以创建出许多不同的对象

      // 2.Class 的基本用法
      // 类名一般大写
      // class Person {} √
      // class Person() {} ×
      // class Person {}; ×
      // function func() {}

      // class Person {
      //   // 实例化时执行构造方法，所以必须有构造方法，但可以不写出来
      //   constructor(name, age) {
      //     // console.log('实例化时执行构造方法');
      // this 代表实例对象，上面定义的是实例属性/方法
      //     this.name = name;
      //     this.age = age;

      //     // 一般在构造方法中定义属性，方法不在构造方法中定义
      //     // this.speak = () => {};
      //   }

      //   // speak:function(){}

      //   // 各实例共享的方法
      //   speak() {
      //     console.log('speak');
      //   }
      // }

      // // Person();
      // const zs = new Person('ZS', 18);
      // const ls = new Person('LS', 28);
      // // console.log(zs.name);
      // // console.log(zs.age);
      // // console.log(zs.speak);
      // zs.speak();
      // // console.log(ls.name);
      // // console.log(ls.age);
      // // console.log(ls.speak);
      // console.log(zs.speak === ls.speak);

      // 3.Class 与构造函数
      class Person {
        constructor(name, age) {
          this.name = name;
          this.age = age;

          // this.speak = () => {};
        }

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

        // run(){}
      }
      // Person.prototype.run = function () {};

      // console.log(typeof Person);
      // console.log(Person.prototype.speak);

      // function Person(name, age) {
      //   this.name = name;
      //   this.age = age;

      //   // this.speak = () => {};
      // }
      // Person.prototype.speak = function () {};
    </script>

二。声明方式

立即执行的类就是定义和实例化一起；

---

    <script>
      // 1.声明形式
      // class Person {
      //   constructor() {}

      //   speak() {}
      // }

      // 2.表达式形式
      // function Person(){}
      // const Person = function () {};

      // const Person = class {
      //   constructor() {
      //     console.log('constructor');
      //   }

      //   speak() {}
      // };
      // new Person();

      // (function () {
      //   console.log('func');
      // })();
      // func()

      // 立即执行的匿名类
      new (class {
        constructor() {
          console.log('constructor');
        }
      })();
      // new Person();
    </script>

三。class的属性和方法

不仅在构造方法里可以添加实例的属性，如下的方式也可以添加，相当于是实例属性的默认值，列出来一目了然可以看到有哪些属性；和构造方法里给实例添加属性一样，只是不需要this；图中框住部分也可以添加默认方法；给实例添加方法刚刚前面说过了，一样的；

---

---

注意静态方法和属性写在和构造方法平行的，而不是写在构造方法里面；静态方法和实例方法定义类似，区别就是前面多个static，不过静态方法简洁表示法或者赋值都可以；

静态属性也可以在类外面加，Person.version = 1.0;

注意，类的静态属性，方法在定义完成后类自己就可以使用；类里面定义的实例共享方法也是定义完就可以使用（方法已经绑定到类的原型上了），不需要实例化后才能使用;

    <script>
      // 1.实例属性
      // 方法就是值为函数的特殊属性
      // class Person {
      //   age = 0;
      //   sex = 'male';
      //   getSex = function () {
      //     return this.sex;
      //   };

      //   constructor(name, sex) {
      //     this.name = name;
      //     // this.age = 18;
      //     this.sex = sex;
      //   }

      //   // speak() {
      //   //   this.age = 18;
      //   // }
      // }

      // const p = new Person('Alex');
      // console.log(p.name);
      // console.log(p.age);

      // 2.静态方法
      // 类的方法
      // class Person {
      //   constructor(name) {
      //     this.name = name;
      //   }

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

      //   // static speak() {
      //   //   console.log('人类可以说话');

      //   //   // this 指向类
      //   //   console.log(this);
      //   // }
      // }

      // // Person.speak = function () {
      // //   console.log('人类可以说话');
      // //   console.log(this);
      // // };

      // const p = new Person('Alex');
      // p.speak();

      // Person.speak();

      // 3.静态属性
      // 类的属性
      class Person {
        constructor(name) {
          this.name = name;
        }

        //  不要这么写，目前只是提案，有兼容性问题
        // static version = '1.0';

        static getVersion() {
          return '1.0';
        }
      }
      // Person.version = '1.0';

      const p = new Person('Alex');
      console.log(p.name);

      // console.log(Person.version);
      console.log(Person.getVersion());
    </script>

注意，类里面的静态方法、实例方法、构造方法后面都没有逗号和分号

四。私有属性和方法

私有：类中的方法和属性只能在类的内部使用，不能在类的外部使用

注意：下面演示的是实例的属性私有，并不是类本身的属性的私有

公开的话会造成有时候不小心修改了属性值 比如不小心p.name = xxx 覆盖了原来了

ES6没有原生语法支持所以要模拟私有属性和方法

模拟私有：我们想访问name属性里面的值，可以利用函数返回值的方式；

下划线是不成文的规定，约束力不大

立即执行函数模拟模块，模块可以防止全局污染，把声明类放到模块里，其他代码放到另一个模块里

只能通过getName这个接口获取到name值

移出类：在类外面用个变量代替，弊端就是破坏了类的封装，因为本该属于类内部的东西

查看代码

     <script>
      // 1.为什么需要私有属性和方法
      // 一般情况下，类的属性和方法都是公开的
      // 公有的属性和方法可以被外界修改，造成意想不到的错误
      // class Person {
      //   constructor(name) {
      //     this.name = name;
      //   }

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

      //   getName() {
      //     return this.name;
      //   }
      // }
      // const p = new Person('Alex');
      // console.log(p.name);
      // p.speak();

      // // ....
      // p.name = 'zs';
      // console.log(p.name);

      // 2.模拟私有属性和方法
      // 2.1._ 开头表示私有
      // class Person {
      //   constructor(name) {
      //     this._name = name;
      //   }

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

      //   getName() {
      //     return this._name;
      //   }
      // }
      // const p = new Person('Alex');
      // // console.log(p.name);
      // p.name = 'zd';
      // console.log(p.getName());

      // 2.2.将私有属性和方法移出类

      (function () {
        let name = '';

        class Person {
          constructor(username) {
            // this.name = name;
            name = username;
          }

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

          getName() {
            return name;
          }
        }

        window.Person = Person;
      })();

      (function () {
        const p = new Person('Alex');
        console.log(p.name);
        console.log(p.getName());
      })();

五。继承exends

不需要实例化只要extends这句代码就实现了原型链的三角关系

证明了Teacher.prototype是Person的实例

下面两句就是继承的结果

上图解释了Teacher实例可以使用父类里面的实例共享方法，因为在原型链上；Teacher类可以使用（父类）Person类的属性和方法，因为也在原型链上

实例子类时，子类构造方法执行，super（）执行，调用父类的构造方法，父类构造方法执行，这时父类构造方法里面的this指向子类的实例（很好理解，因为是给子类实例添加属性方法所以this指向子类的实例）-----这也可以叫继承，继承父类构造方法里面的属性

父类里面的东西（属性方法）全部都能继承；同名覆盖，是在子类中又单独写了一下，但是在子类中单独写出来的就是加到子类原型上（子类实例的共享方法）以及子类本身上（静态属性方法），而不是继承的了；同名覆盖是原型链的遮蔽，属性名相同时候优先调用离自己最近的属性；而不是修改了原来继承的那个方法、属性；

this.feature不要放到super之前，会报错

    <script>
      // 1.子类继承父类
      class Person {
        constructor(name, sex) {
          this.name = name;
          this.sex = sex;

          this.say = function () {
            console.log('say');
          };
        }

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

        static speak() {
          console.log('static speak');
        }
      }
      Person.version = '1.0';

      // class Programmer extends Person {
      //   constructor(name, sex) {
      //     super(name, sex);
      //   }
      // }

      // const zs = new Programmer('zs', '男');
      // console.log(zs.name);
      // console.log(zs.sex);
      // zs.say();
      // zs.speak();
      // Programmer.speak();
      // console.log(Programmer.version);

      // 2.改写继承的属性或方法
      class Programmer extends Person {
        constructor(name, sex, feature) {
          // this.feature = feature; ×

          // this 操作不能放在 super 前面
          super(name, sex);

          // this.feature = feature;
        }

        hi() {
          console.log('hi');
        }

        // 同名覆盖
        speak() {
          console.log('Programmer speak');
        }

        static speak() {
          console.log('Programmer static speak');
        }
      }
      Programmer.version = '2.0';

      const zs = new Programmer('zs', '男', '秃头');
      console.log(zs.name);
      console.log(zs.sex);
      console.log(zs.feature);
      zs.say();
      zs.speak();
      zs.hi();
      Programmer.speak();
      console.log(Programmer.version);
    </script>

  六。super

super作为对象在子类构造方法中使用 this问题

在子类中定义了与父类同名的speak方法，会把父类中的speak方法遮蔽掉（子类实例根据原型链就近原则调用speak方法），如果想保留父类中speak方法里的操作，可以在子类的speak方法中，调用一下父类的speak方法；

注意，类里面不要写语句，下面注释部分都报错；只能写属性和方法且要注意语法和对象不一样；

关于类里面哪些代码在还没实例的时候已经执行了，以及继承时的这个情况：

静态的以及实例共享的方法都不需要实例化就已经添加上了！

这个color也是相当于写在父类构造方法中

下面这个可以作为拓展：

super作为对象使用时，使用super调用父类里面的静态方法，实例共享方法也好，注意方法里面的this指向；其他时候的this是符合this指向规则的

理解prototype时，把类当作构造函数；

 当子类继承父类时，如果不需要通过constructor设置属性和继承父类constructor中的属性，那么就可以不写constructor和super，否则，就必须写上constructor和super。子类中的constructor和super必须同时存在或者同时不存在；

七。class的应用-- 幻灯片的切换

基类写底层都适用的功能，比如pc端幻灯片，移动端幻灯片继承基类，子类中写具体pc端代码或者移动端代码