JavaScript ES6 类[TOC] 1.1 constructor（构造器） constructor构造器的作用

[TOC]

1.1 constructor（构造器）

constructor构造器的作用就是，每当 new 这个类的时候，必会优先执行constructor构造器中的代码；

传统构造函数

function Animal (name, age) {
 	   //实例属性
         this.name = name;
         this.age = age;
     }
const a1 = new Animal('dog', 3);

class类

class Animal {
         constructor(name, age){
             //实例属性
             this.name = name;
             this.age = age;
         }
     }
const a2 = new Animal('cat', 2);

每一个class类中，都有一个constructor构造器，如果没有手动指定constructor构造器，那么可以认为class类内部，有个隐形的，空的constructor构造器。
```
class Animal {
 //constructor(){ 这里就是隐形的，空的constructor构造器
//}
}
```

1.2 使用 static 创建静态属性

什么是静态属性：

通过 “构造函数” 直接访问到的属性；例如下面的 sounds，直接挂载给了 Animal ，所以 sounds 是静态属性

function Animal (name, age) {
        this.name = name;
        this.age = age;
    }
    Animal.sounds = 'yayaya';
    console.log(Animal.sounds)// yayaya

    const a1 = new Animal('dog', 3);
    console.log(a1.sounds)// undefined
    console.log(a1.name)//dog
    console.log(a1.age)//3

相反的是，name，age，能被new出来的实例a1所访问到，所以 name 和 age 是 实例属性

在 class 内部怎么定义 静态属性

通过 static 关键字修饰的属性，就是 静态属性

class Animal {
         constructor(name, age){
             this.name = name;
             this.age = age;
         }
         static sounds = 'yayaya';
     }
     console.log(Animal.sounds)//yayaya

     const a2 = new Animal('cat', 2);
     console.log(a2.sounds)//undefined
     console.log(a2.name)//cat
     console.log(a2.age)//2

1.3 实例方法

什么是 实例方法： 能被new出来的实例所访问的方法

传统构造函数定义实例方法的方式：

function Animal (name, age) {
         this.name = name;
         this.age = age;
     }
     Animal.prototype.sounds = function () {
         console.log('yayaya')
     }

     const a1 = new Animal('dog', 3);
     a1.sounds()//yayaya

class类中，定义实例方法的方式：

	class Animal {
         constructor(name, age){
             this.name = name;
             this.age = age;
         }
         sounds () {
             console.log('yayaya')
         }
     }

     const a2 = new Animal('cat', 2);
     a2.sounds()//'yayaya'

class内部定义实例方法，与constructor，static平级定义

通过控制台打印 a1 和 a2 可以看到，实例方法都是定义在了原型链上，所以两种方法本质上并没有区别。

1.4 使用 static 创建静态方法

静态方法就是挂载到构造函数上的方法，new 出来实例访问不到；

传统构造函数定义静态方法的方式：

function Animal (name, age) {
         this.name = name;
         this.age = age;
     }
     Animal.sounds = function () {
         console.log('yayaya')
     }
     Animal.sounds() //yayaya

     const a1 = new Animal('dog', 3);
     a1.sounds()// 报错：a1.sounds is not a function

class类内部定义静态方法的方式：

class Animal {
         constructor(name, age){
             this.name = name;
             this.age = age;
         }
         static sounds () {
             console.log('yayaya')
         }
     }
     Animal.sounds() //yayaya

     const a2 = new Animal('cat', 2);
     a2.sounds() // 报错：a2.sounds is not a function

在class类内部，定义静态属性和静态方法都是通过static关键字来修饰的！

1.5 补充

在class类内部的{ }区间内，只能写constructor构造器、static静态方法、static静态属性和实例方法（实例属性在constructor构造器内）！

2.1 使用 extends 实现子类继承父类

为什么要实现子类继承父类？

原代码：

class American {
         constructor (name, age) {
             this.name = name;
             this.age = age;
         }
     }
     const a1 = new American('Bob', 25);

     class Chinese {
         constructor (name, age) {
             this.name = name;
             this.age = age;
         }
     }
     const c1 = new Chinese('小王', 26);

上面的代码两个类American和Chinese中的constructor里面的代码是一样的，如果我们要建立更多这样的类，这样的代码就会十分臃肿，所以我们可以创建一个父类，让子类去继承父类的内容；

 //这是父类
     class Person {
         constructor (name, age) {
             this.name = name;
             this.age = age;
         }
     }
     
     //这是子类
     class American extends Person{
         
     }
     const a1 = new American('Bob', 25);

     //这是子类
     class Chinese extends Person{
         
     }
     const c1 = new Chinese('小王', 26);

子类继承父类的实例方法

 //这是父类
     class Person {
         constructor (name, age) {
             this.name = name;
             this.age = age;
         }
         say (h) {
             console.log(h)
         }
     }

     //这是子类
     class American extends Person{
         
     }
     const a1 = new American('Bob', 25);
     a1.say('hello')//hello

     //这是子类
     class Chinese extends Person{
         
     }
     const c1 = new Chinese('小王', 26);
     c1.say('你好')//你好

2.2 super 函数的使用

super是什么

super是一个函数，子类中的super就是父类中constructor构造器的一个引用；
什么时候需要使用super

当子类通过extends继承父类后，子类需要有自己独有的属性时，就需要在子类的constructor构造器内部 优先优先优先 使用super函数，必须要优先使用（语法规范）；

例如下面的例子，中国人在继承了父类的同时，还有了独有的身份证号码：

  class Person {
          constructor (name, age) {
              this.name = name;
              this.age = age;
          }
          say (h) {
              console.log(h)
          }
      }

      //这是子类
      class American extends Person{

      }
      const a1 = new American('Bob', 25);
      a1.say('hello')

      //这是子类
      class Chinese extends Person{
          constructor (name, age, IDcard) {
              super(name, age);
              this.IDcard = IDcard;
          }
      }
      const c1 = new Chinese('小王', 26, '220225xxxxxxxxxxx');
      c1.say('你好')
      console.log(c1)//Chinese {name: "小王", age: 26, ID: "220225xxxxxxxxxxx"}