class类

“这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战”

本文通过构造函数方法 与 class 进行对比来讲解，这样会更好理解点

1，定义

class 的本质是 function，它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法

2，函数的使用（构造函数 与 class）

1，新建

• 构造函数创建实例

**

function Person(name,age){
    this.name = name
    this.age = age
}
const constructP = new Person('张小五',21) // {name: "张小五"  age: 21}

• class 创建实例
  constructor 是类的 构造器，每个类，都有构造器
程序员没有手动指定构造器，默认类内部有一个隐形的空构造器，类似于 constructor(){}
构造器作用：每当 new 这个类时候，必然会优先执行 构造器里的代码

**

class Animal{
  constructor(name,age){
        this.name = name
        this.age = age
  }
}
const classA = new Bnimal('张小五',10) // {name: "张小五"  age: 10}

2，静态属性 与 实例属性
静态属性：直接挂载给构造函数的属性
实例属性：通过new出来的实例，访问到的动态属性

**

// 构造函数 
constructP.name // 张小五 动态属性
constructP.info= '我是构造函数静态属性'

// class 类
classA.name // 张小五 动态属性
class Animal{
  static info = '我是class类静态属性'
}

3，挂载的 静态方法 与 实例方法
静态方法：在函数原型上，添加一个静态方法
实例方法：在函数原型上，添加一个实例方法

• 构造函数

**

// 静态方法
 constructP.show = function () {
    console.log('我是面向对象挂载的show静态方法')
}

// 实例方法
constructP.prototype.say = function () {
    console.log('我是面向对象挂载的say实例方法')
}

• class 类
  在class类 上添加一个【实例方法】
在class类 上，通过static 修饰的属性，添加一个【静态方法】

**

class Bnimal{
     ...... // 此处添加constructor属性
    say () { // 在a的原型上，查看到该方法
         console.log('我是添加在class原型上的方法')
    }
    static show () { // 在class类 上，通过 static 修饰的属性，添加【静态方法】
         console.log('我是class挂载的show静态方法')
    }
}

注：类定义不会被提升，这意味着，必须在访问前对类进行定义，否则就会报错。
类中方法不需要 function 关键字；方法间不能加分号

4，继承

• class 类
  通过 extends 来设置子类继承了父类元素
直接把子类的方法，添加在父类元素上，通过prototype来获取实例方法

**

class PersonSet{
   constructor(name,age){
       this.name = name
       this.age = age
   }
   say(){ // 子类继承父类上的实例方法
       console.log('打声招呼呗')
  }
}

 // 子类继承了父类元素的属性
class American extends PersonSet { } 

const C = new Chinese('张小五',22)
console.log(C) // {name: "张小五"  age: 22}

3，constructor中的 super 使用

1，为什么 里面要调用 super？
答：如果子类通过 extends 关键字继承父类，子类的 constructor 构造函数中，必须优先调用 super()；

2，super 是什么东西？
super 是一个函数，子类的 super 是父类构造器 constructor 构造器的一个引用

3，为什么调用之后，实例上 name 与 age 就变成了 undefined
因为是父类构造器的引用，需要传值，不传的话，肯定是undefined

**

class PersonSet {
     constructor(name,age){
          this.name = name
          this.age = age
     }
}

class American extends PersonSet {
    constructor(name,age){
         super(name,age)
     }
}
const A = new American('jack',20)
console.log(A) // American {age: 20,name: "jack"}

4，为子类挂载独有的方法或者属性

**

class PersonSet{
     constructor(name,age){
          this.name = name
          this.age = age
     }
}

class Chinese extends PersonSet {
    constructor(name,age,number){
         super(name,age)
         this.number = number
     }
}
const C = new Chinese ('jack',20,'3213221898xxxxxxxx')
console.log(C) // Chinese {name: "jack",age: 20,number:'3213221898xxxxxxxx'}

注：语法规范，在子类中，this 只能放到 super 之后使用
如果所有子类都共享的，就放到父类，否则直接放到子类中，即可