【ES6】js 中class的extends、super关键字用法和避坑点

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

}

class Student extends Person {
constructor(name, age, grade) {
super(name, age); // 调用父类的构造函数，这一行必须在this之前，否则报错。因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用super()方法，子类就得不到自己的this对象。
this.grade = grade;
}
study() {
console.log(I'm studying...);
}
}


在上面的例子中，Student类继承了Person类的构造函数和方法，并且定义了自己的属性和方法。在构造函数中，使用super关键字来调用父类的构造函数，以便初始化父类的属性和方法。  
 **注意：**  
 上面的`super(name, age)`必须在this之前。因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用super()方法，子类就得不到自己的this对象。


###### 二、super关键字


super关键字用于调用父类的方法。在子类的方法中，可以使用super关键字来调用父类的方法。使用super关键字时，需要指定要调用的父类方法，语法如下：

super(); // 调用父类的构造函数
super.父类方法(); // 调用父类的方法
super.属性; // 访问父类的属性


例如，在上面的例子中，在Student类的构造函数中使用了super关键字来调用父类的构造函数：

constructor(name, age, grade) {
super(name, age); // 调用父类的构造函数
this.grade = grade;
}


另外，在子类的方法中，也可以使用super关键字来调用父类的方法。例如：

class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(Hello, my name is ${this.name});
}
}

class Student extends Person {
constructor(name, grade) {
super(name); // 调用父类的构造函数
this.grade = grade;
}
sayHello() {
super.sayHello(); // 调用父类的方法
console.log(I'm a student in grade ${this.grade});
}
}

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

【ES6】js 中class的extends、super关键字用法和避坑点_js class extends(1)