使用class实现继承||小白的笔记

快快乐乐学前端呀~~~

前言

class的出现目的

在 class 出现之前，JavaScript 实现继承是件麻烦事，构造函数继承有加上原型上的函数不能复用的问题；原型链继承又存在引用值属性的修改不独立的问题；组合继承又存在两次调用构造函数的问题，寄生组合继承，写起来又太麻烦了，总之，在 class 出现前，JavaScipt 实现继承真是件麻烦事儿。

参考链接：juejin.cn/post/710890…

ES6之前，我们生成实例对象的方法都是通过构造函数，

而class的这种写法更接近传统语言，无论是对某个属性设置存储函数和取值函数，还是实现继承，都要更加清晰和方便；

class的出现原因：只是让对象原型的写法更加清晰、更像面向对象编程的语法，解决继承麻烦等问题；

大白话：class写法更简单 更清晰方便，没那么麻烦。

那class究竟是什么？

我们要先了解它的本质是什么

类的本质：类的本质是一个函数，类自身指向的就是构造函数

而class是类的关键字

class的写法

class xxx {

constructor('形参'){
构造函数
}
xx(){
函数方法}
}

let x = new xxx('传具体的值') //对象实例化

举例

class Person {

 //构造函数
    constructor(name) {
        this.name = name
    } 

//方法
    say() {
        console.log(this.name)
    }
}

let p = new Person('李四') //对象实例化

注意：

class后面跟着的名称必须大写开头

里面的构造函数必须是constructor(){} 格式

class解决什么问题？

解决了继承麻烦的问题

举例

class Students {
            constructor(name, score) {
                this.name = name
                this.score = score
            }
            doing() {
                console.log('写作业');
            }
        }
        let student = new Students('张三', 61)
        console.log('student', student);
        student.doing()

结果：

class Students {
            constructor(name, score) {
                this.name = name
                this.score = score
            }
            doing() {
                console.log('写作业');
            }
        }

class Teacher {
            constructor(name, gender) {
                this.name = name
                this.gender = gender
            }
            doing() {
                console.log('吃饭饭');
            }
        }

        let student = new Students('张三', 61)
        console.log('student', student);
        student.doing()

        let teacher = new Teacher('李四', '男')
        console.log('teacher', teacher);
        teacher.doing()

结果：

以上代码可以使用class继承方式写成这样：

//共同变量提出来
        class Person {
            constructor(name) {
                this.name = name
            }
        }
        //需要继承的类 1.需要加上extends Person 2.原先this.name则由super(name)取代
        class Students extends Person {
            constructor(name, score) {
                super(name)
                this.score = score
            }
            doing() {
                console.log('写作业');
            }
        }

        class Teacher extends Person {
            constructor(name, gender) {
                super(name)
                this.gender = gender
            }
            doing() {
                console.log('吃饭饭');
            }
        }

        let student = new Students('张三', 61)
        console.log('student', student);
        student.doing()

        let teacher = new Teacher('李四', '男')
        console.log('teacher', teacher);
        teacher.doing()

结果：

两种写法结果是一致的

以上例子是class的一个简单继承问题（而继承的实现需要细究原型与原型链）