JS类和继承

偏执的太偏执、 2022-10-22 07:51 237阅读 0赞

## 类 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

![2021040517440588.png][]

JS中的class其实就是一个函数，class是关键字，后面是类名，一般以大写开头，然后是大括号

1： constructor就是构造函数，里面的this.name中的this指向new出来的实例（当前实例），如3中的xialuo就是new出来的一个实例，执行了3后，this就等于xialuo这个实例对象了。括号里的name，number就是形参，而3中括号里的'夏洛'和2017102就是实参，new一个实例的时候需要把实参传进去，这样这个xialuo就变成真实的对象了，它有自己独立的name属性，值为夏洛，它也有自己独立的number属性，值为2017102。所谓类的对象，就是根据什么Student这一个类（图纸）所制造出来的实例。

2：sayHi是类中的方法，可以通过this.（属性名）获取实例对象（当前实例）的这个属性，this就是对象本身，为什么这里的this就是实例对象本身呢，因为4表示xialuo这个实例对象调用了sayHi这个方法，根据this指向一条规则，谁调用了这个方法，this就指向谁，所以这时候sayHi方法里的this.name能拿到xialuo的name属性。

3：new一个实例出来，将Student这一个类（图纸）实例化（将一个Student大类变成一个真实的xialuo这个具体的学生了），执行这句代码后，xialuo相当于这样一个具体对象

xialuo = {
      name:'夏洛',
      number:'2017102',
      classroom:401,
      __proto__:原型对象
    }

4：因为xialuo是Student类的实例对象，所以可以调用Student类里的方法sayHi，可以通过方法实现一些“动作”。

## 继承 ##

//父类
    class People{
    	constructor(name) {
    		this.name = name
    	}
    	eat(){
    		console.log(`${this.name} eat something`)
    	}
    }
    //子类Student
    class Student extends People{
    	constructor(name,number) {
    		super(name)
    		this.number = number
    	}
    	sayHi(){
    		console.log(`姓名：${this.name},学号：${this.number}`)
    		//console.log('姓名：' + this.name + ',学号：' + this.number)
    	}
    }
    
    //子类Teacher
    class Teacher extends People{
    	constructor(name,major) {
    		super(name)
    		this.major = major
    	}
    	teach(){
    		console.log(`${this.name} 教授 ${this.major}`)
    	}
    }
    //Student实例
    var xialuo = new Student('夏洛',2017102)
    console.log(xialuo.name)
    console.log(xialuo.number)
    xialuo.sayHi()
    xialuo.eat()
    //Teacher实例
    var wang = new Teacher('王老师','语文')
    console.log(wang.name)
    console.log(wang.major)
    console.log(wang.number)//undefined
    wang.teach()
    wang.eat()
    wang.sayHi()//报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][]

类的构造函数中有个super，它类似于ES5语法中的call继承，当做函数使用的时候,代表的是父类的构造函数，ES6要求，子类的构造函数必须执行一些super

*  super()代表的是父类的构造函数 但是返回的是子类的实列，内部的this指向的是子类的实列 // 相当于People(父类).prototype.constructor.call(this);

不是这个类的属性，这个类的实例去使用它，会打印undefined，不是这个类的方法，这个类的实例去调用它，会报错。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221022/9fb959bb948d4a828feacad3782a60fb.png
[2021040517440588.png]: /images/20221022/8851ee1597a542e7a460c775f6171b50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221022/a843a54aa3de4aeabe9c218def43367d.png