Class类的继承——子类继承父类的语法-class 子类 extends 父类 & super代表-原型对象Person.prototype、前面不能有this操作
1、继承的语法
1、子类继承父类——语法:class 子类 extends 父类,在子类的构造方法中调用父类的构造方法。
2、同名覆盖:子类中声明的方法名和父类中的方法名相同时,子类中的方法将覆盖继承于父类的方法,采用自己的。
3、super前面不能有this操作。
<script>
//父类Person
class Person {
constructor(name, sex) {
this.name = name;
this.sex = sex;
this.say = function () {
console.log('say');
};
}
speak() { console.log("speak") }
static speak() { // static 定义数据
console.log("static speak")
}
}
Person.version = '1.0';
// 一:子类继承父类——语法:class 子类 extends 父类
class Programmer extends Person {
//在子类的构造方法中调用父类的构造方法
constructor(name, sex, feature) {
// this.feature = feature; 三:×错误写法,super前面不能有this操作
super(name, sex);
this.feature = feature;
}
//二:同名覆盖:子类中声明的方法名和父类中的方法名相同时,子类中的方法将覆盖继承于父类的方法,采用自己的。
speak() {
console.log("Programmer speak");
}
}
const zs = new Programmer("楚留香", "male", "很帅");
console.log(zs.name, zs.sex, zs.feature); //楚留香 male 很帅
zs.say(); //say
//子类使用了自己的speak方法:
zs.speak();//Programmer speak
Programmer.speak();//static speak
</script>
2、super()的特殊性
2.1、super作为函数调用
代表父类的构造方法,只能用在子类的构造函数中,用在其他地方就会报错;
super虽然代表了父类的构造方法,但是内部的this指向调用这个函数的类的实例
<script>
//1.super作为函数调用
//代表父类的构造方法,只能用在子类的构造函数中,用在其他地方就会报错
//super虽然代表了父类的构造方法,但是内部的this指向调用这个函数的类的实例
class Person {
constructor(name) {
this.name = name;
console.log(this);
}
}
class Programmer extends Person {
constructor(name) {
super(name);
}
fn() {
// super(name);报错:Uncaught SyntaxError: 'super' keyword unexpected here
}
}
const xh = new Programmer("小红", "female");
</script>
2.2、super作为对象使用
(1) 在子类的构造方法或一般方法中,super代表的是原型对象Person.prototype
<script>
//2.作为对象使用:
//(1).在子类的构造方法或一般方法中,super代表的是原型对象Person.prototype
class Person {
constructor(name) {
this.name = name;
}
speak() {
console.log('speak');
console.log(this);
}
}
class Programmer extends Person {
constructor(name) {
super(name);
//在子类的构造方法中调用父类的原型的speak方法
super.speak(); //speak this指向子类的实例
}
//在子类的一般方法中调用调用父类的原型的speak方法,再补充子类的其他功能:
speak() {
super.speak();//speak this指向子类的实例
console.log("Programmer speak") //Programmer speak
}
}
const xh = new Programmer("小红");
xh.speak();
</script>
(2) 在子类的静态方法中使用,super指向的是父类,而不是父类的原型对象,this指向子类
<script>
//(2)在子类的静态方法中使用,super指向的是父类,而不是父类的原型对象
class Person {
constructor(name) {
this.name = name;
}
speak() {
console.log('speak');
console.log(this);
}
static speak() {
console.log("Person static speak")
}
}
class Programmer extends Person {
constructor(name) {
super(name);
}
static speak() {
super.speak();
console.log("Programmer static speak")
}
}
Programmer.speak();
</script>
3、注意事项
使用super的时候,必须显示指定是作为函数使用还是作为对象使用(要么加括号,要么打点调属性方法),否则浏览器会报错。
当子类继承父类时,如果不需要通过constructor设置属性和继承父类constructor中的属性,那么可以不写constructor和super,否则,就必须写上constructor和super。