Bootstrap

深层次理解JavaScript中的super关键字

先来上一道题

下述代码的执行结果为()

let obj1 = {
    name: '张三',
    getName() {
        return this.name;
    }
}
 
let obj2 = {
    name: '李四',
    getName() {
        return super.getName();
    }
}
 
Object.setPrototypeOf(obj2, obj1);
console.log(obj2.getName());

正确答案:C
定义两个变量 obj1和obj2,将obj2的原形设置为obj1,随后调用obj2中的getName方法。
由于使用了super
而super作为函数调用时,代表父类的构造函数;
而super作为对象时,在普通方法中,指向父类的原型对象,在静态方法中,指向父类;

下面我们来详细说说:
在JavaScript中super关键字 ----它主要在类的继承中使用

1. 调用父类的构造函数:在派生类的构造函数中,必须在使用this关键字之前调用super()。例如:

class Parent {
constructor(name) {
this.name = name;
}
}

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

2. 访问父类的方法:可以使用super.methodName()来调用父类的方法。例如:


class Parent {
sayHello() {
return 'Hello from Parent';
}
}

class Child extends Parent {
sayHello() {
return `${super.sayHello()} and Hello from Child`;
}
}

const child = new Child();
console.log(child.sayHello()); // 输出: Hello from Parent and Hello from Child

3. 在对象字面量中使用:super也可以在对象字面量中使用来调用原型链上的方法。例如:

const parent = {
sayHello() {
return 'Hello from Parent';
}
};

const child = {
sayHello() {
return `${super.sayHello()} and Hello from Child`;
}
};

Object.setPrototypeOf(child, parent);
console.log(child.sayHello()); // 输出: Hello from Parent and Hello from Child

有帮助到你点个赞吧!
在这里插入图片描述

;