构造函数(class类)、原型、原型链、继承

70 阅读2分钟

1.构造函数

es5之前包括es5,叫做构造函数。而在es6中出现了class(类),也可以说是构造函数的语法糖,即class 的本质是 构造函数class的继承 extends本质为构造函数的原型链的继承。构造函数 定义:通过  new 函数名来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。之所以有构造函数与普通函数之分,主要从功能上进行区别的,构造函数的主要 功能为 初始化对象,特点是和new一起使用。new就是在创建对象,从无到有,构造函数就是在为初始化的对象添加属性和方法。构造函数定义时首字母大写(规范)。

 //定义一个父类
        class People {
            constructor(name, gender, hobby) {
                this.name = name,
                    this.gender = gender,
                    this.hobby = hobby
            }
            mainInfo() {
                console.log(`姓名:${this.name} 性别:${this.gender} 爱好:${this.hobby}`);
            }
            eat() {
                console.log(`${this.name} eat something`);
            }
        }
        //子类
        class Teacher extends People {
            constructor(name, gender, hobby, major) {
                super(name, gender, hobby),
                    this.major = major
            }
            teach() {
                console.log(`${this.name} 讲授 ${this.major} 这门课程`);
            }
            lesson() {
                console.log(`${this.name} 又在教训他的学生`);
            }
        }
        class Student extends People {
            constructor(name, gender, hobby) {
                super(name, gender, hobby)
            }
            study() {
                console.log(`${this.name}正在学习`);
            }
        }

2.什么是原型和原型链?

原型:每一个对象都与另一个对象相关联,那个关联的对象就称为原型。
在JavaScript中,每当定义一个函数数据类型(普通函数、类)时候,都
会天生自带一个prototype属性,这个属性指向函数的原型对象,并且这
个属性是一个对象数据类型的值。

Teacher.png

这个Teacher的类,与他关联的People便是他的原型。

原型.png

原型链:每一个对象,都有一个原型对象与之关联,这个原型对象它也是一个普通对象,
这个普通对象也有自己的原型对象,这样层层递进,就形成了一个链条,这个链条就是
原型链。通过原型链可以实现JS的继承,把父类的原型对象赋值给子类的原型,这样子
类实例就可以访问父类原型上的方法了。

原型链.png

3.继承

使用extends关键字继承,并且在子类的构造函数中需要使用super()用它的原型。并且在super之前引用this会报错。