【es6】-- Class类

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

前言

前几天在掘金上看过一篇文章 你会用ES6，那倒是用啊！
看完后结合自己的情况想了下，确实，除了一些常用的：let、const、promise、箭头函数外，其他es6的新特性得确没怎么用过。But！没用过并不代表不重要啊,而且面试的时候如果问起来es6新特性，你说个let\const怎么也说不过去吧，所以，从这篇文章开始更一些es6的新特性，巩固一下基础吧

初识class类

在es6之前是没有类的概念的，我们创建实例对象往往是通过构造函数的方式来创建

// 创建一个Person类
function Person(name){
    this.name = name;
}
// 给Person原型上添加方法
Person.prototype.sayHi = function(){
    console.log('hello 我是',this.name)
}
// 创建Person的实例对象
let person = new Person("Jsnewbie")
person.sayHi() // hello 我是Jsnewbie

es6的class语法，可以看做是构造函数的语法糖，用class语法我们可以像下面一样创建一个类

class Person{
    // 类的构造方法
    constructor(name){
        this.name = name
    }
    // 类的一般方法
    sayHi(){
        console.log('hello 我是',this.name)
    }
    let person = new Person("Jsnewbie")
    person.sayHi() // hello 我是Jsnewbie
}

constructor方法

constructor()方法是类的默认方法，如果没有定义该方法会默认添加此方法

class Preson{}
// 与下面的写法相等
class Person{
    // 构造方法(默认就有)
    constructor(){}
}

constructor()方法默认返回该类的实例对象，也就是this，当然也可以指定对象返回

class Foo {
  constructor() {
    return Object.create(null);
  }
}

new Foo() instanceof Foo
// false

静态方法

在类上定义的方法其实都是定义在原型对象(prototype)上的，所以new出来的实例可以直接调用方法

class P1{
    constructor(name){
        this.name = name 
    }
    sayHi(){
        console.log('hello 我是',this.name)
    }
}

let p = new P1('Jsnewbie')
p.sayHi() // hello 我是 Jsnewbie

如果我们不想让实例对象继承原型上的方法，我们可以在方法前加上 static 关键字

class P1{
    constructor(name){
        this.name = name 
    }
    static sayHi(){
        console.log('hello 我是',this.name)
    }
}

let p = new P1('Jsnewbie')
p.sayHi() // 报错 p.sayHi is not a function

类的继承

class类通过extends关键字实现继承

class P1{
    constructor(name){
        this.name = name
    }
    sayHi(){
        return `hello 我是,${this.name}`
    }
}

class P2 extends P1{
    constructor(name,age){
        super(name)
        this.age = age 
    }
    sayHi2(){
        console.log( super.sayHi(), '我今年'+this.age)
    }
}
let p = new P2('Jsnewbie',28)
p.sayHi2() //hello 我是,Jsnewbie 我今年28

上面的代码表示P2继承P1，super关键字，表示父类的构造函数。相当于把P1中的constructor中的属性放到P2中，把P1中的sayHi()方法在P2中调用