JS高级之ES6类与对象、静态成员、类的继承

一、类与对象

什么是类？

        好比：人类、动物类

        就是一个群体的统称

类里描述这一类群体，有哪些特征和行为，所谓的特征对应到代码中就是属性，行为对应到代码中就是方法

类理解为是一套描述数据的模板，但是没有具体的数据

在ES6以前JS里是没有类专门的语法，都是通过 构造函数 起到类的作用

什么是对象？

        某一个群体里的实际例子

对象可以理解为是根据模板创造出来的具体的数据

所以我们经常把 创建对象 叫做 实例化对象

ES6里声明一个类的语法

class 类名 {
    
    constructor() {
        // 给它描述有哪些属性
    }
    
    // 方法列表
}

例：

        class Person {

            constructor(name, age) {
                // 给它描述有哪些属性:姓名、年龄
                this.name = name,
                this.age = age
            }

            // 方法列表，在这里写方法不用加function
            // 语法：方法名 () { 方法体 }
            eat() {
                console.log('吃啊吃')
            }

            sleep () {
                console.log('睡啊睡')
            }
        }

        // 通过类来创建对象（实例化对象）
        let p1 = new Person('jack', 16)
        console.log(p1)
        p1.eat() 
        p1.sleep()

二、静态成员

静态成员：

        在ES6以前，由构造函数直接调用的属性和方法叫静态成员

        在ES6以后，由类直接调用的属性和方法叫静态成员

在类里面对变量、函数加 static 关键字，那它就是静态成员

        class Person {
       
            // 加一个static关键字，那这就是静态成员
            static name = "Person"
            static version = "v0.0.1"

            static test () {
                console.log('我是静态方法test')
            }
        }

        console.log( Person.name )
        console.log( Person.version )
        Person.test()


        let p1 = new Person() 
        console.log(p1.name) // undefined
        console.log(p1.version) // undefined 因为没有加实例成员

静态成员不会被实例化成为新对象的元素

三、类的继承

面向对象三大特征：

                封装、继承、多态（前端用不上）

继承语法：

class 类名 extends 父类名 {
    constructor() {
        // 必须先调用
        super()
        // 给自己独有属性赋值
    }
    
    // 方法列表
}

例

       // 人类
        // 如果没有写extends，那默认继承自Object
        // 相当于写了一个 extends Object
        class Person {

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

            eat() {
                console.log('吃啊吃')
            }
        }

        // 声明一个中国人类，并继承自人类
        class Chinese extends Person {

            constructor(name, age, hukou) {
                // 是专门用来继承父类的属性的
                // 必须先调用super然后才能给自己的属性赋值
                super(name, age)//super将参数给到被继承的Person
                this.hukou = hukou
            }

            spring() {
                console.log('过春节放鞭炮')
            }
        }

        let lilei = new Chinese('李雷', 16, '北京')
        console.log(lilei)
        lilei.spring() 
        lilei.eat()

• 注意：如果没有写 extends 那么默认继承自 Object
• 细节：如果子类里没有写 constructor 那么默认调用父类的 constructor

四、类的本质与继承的本质

• 类的本质就是构造函数，所以类里的方法也都是放到构造函数.prototype里面的
• 这种语法我们称之为 语法糖

• 继承的本质：

• • 还是通过原型链继承到方法
  • 还是通过调用父类的构造函数并修改它里面的this指向来达到属性继承