学习下es6新增的`class`类

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

缘由

在es6之前，是没有class的概念的，都是通过构造函数来模拟类，es6新增了class类关键字，直观上看起来构造类更方便了，今天来学习下它，巩固一下。

语法

class 本质上是函数

class Person {}
typeof Person // function

class Person {
   constructor (name) {
      this.name = name
   }
   getName () {
      console.log(this.name)
   } 
   static staticFn () {
     return '答案cp3'
   }
}
new Person('答案cp3')

通过 关键字class 加 类名 和 {}来构造一个类

然后里面有一个constructor方法，这是一个构造方法，里面的this指向当前实例。 实例化类的时候会执行constructor方法。

注意的是，下面的getName方法是定义在类的原型链上面，实例化后是存在实例的原型链上。

然后带有static的是静态方法，不会被实例继承，只能通过类调用。同时里面的this指向是指向类。

知识点

1. constructor方法是可选的，如果没有提供的化，实例的时候会默认调用一个空的constructor。 constructor 默认是返回当前实例。无需额外加return，否则会有可能改写当前实例。

   class Person {
      constructor (name) {
         this.name = name
         return {}
      }
   }
   new Person('答案cp3') // {} 
   

   上面说了定义实例属性是在constructor构造方法里面，如果不需要通过constructor构造方法传值，还可以把实例属性定在外面。

   

   把name和age定义在外面，属于实例的属性。

2. 在类的内部通过get函数和set函数拦截对类的属性。

   class Person {
     get name() {
      return '答案cp3'
     }
     set name(name) {
         console.log(name)
     }
   }
   const instance = new Person('答案cp3')
   instance.name = '答案' // 答案
   console.log(instance.name) // 答案cp3
   

3. 类必须要使用new来实例，不能直接调用。

   Person() // 错误
   new Person() // 正确
   

4. 类内部的方法都是不可枚举的

     class Person {
       getName () {
         return '答案cp3'
       }
     }
     const instance = new Person()
     Object.keys(instance) // []
   

5. 类可以通过赋值给另一个变量，此时就不需要提供类名了。如果提供了也只能在内部访问,代表当前类。

   var C = class Person {
       constructor() {
           console.log(Person.name)
       }
   }
   new C() // 打印 Person
   console.log(Person) //  Person is not defined
   

6. class类通过#实现私有属性。

   class Person {
      #getName () {
        return '答案cp3'
      }
    }
    const instance = new Person()
    instance.getName() // 报错，instance.getName is not a function