JavaScript中的super关键字：访问原型属性和调用父类构造函数

2022-12-09 03:46:18

**JavaScript 中的超能力：Super **

在 JavaScript 的广阔领域中，"super" 关键字闪耀着夺目的光芒，它赋予了对象字面量和类一种访问其原型属性和调用父类构造函数的超能力。让我们潜入 "super" 的神奇世界，揭开它的奥秘和应用！

原型属性的访问

想象一下，你正在建造一座大厦，每层都叠放在下一层之上。同样地，JavaScript 对象也建立在层层叠叠的原型之上，它们共享着共同的属性和方法。使用 "super" 关键字，你可以轻而易举地访问这些原型属性，就像登上一座阶梯，逐层探索。

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

class Child extends Parent {
  constructor(name, age) {
    super(name); // 访问 Parent 类的 name 属性
    this.age = age;
  }
}

const child = new Child('John', 25);
console.log(child.name); // 输出：John

在上面的示例中，Child 类继承了 Parent 类的 name 属性。super 关键字允许 Child 类访问并使用这个属性，就像它是自己的属性一样。

调用父类构造函数

"super" 关键字的另一个强大功能是能够调用父类的构造函数。这就像让你的孩子继承父母的基因，从而获得他们的能力和特征。使用 super，你可以传递参数给父类构造函数，为你的子类定制独特的属性。

class Parent {
  constructor(name) {
    this.name = name;
    console.log('Parent constructor called');
  }
}

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

const child = new Child('Mary', 28);

在上面的示例中，super 关键字调用了 Parent 类的构造函数，传递了 name 参数。因此，Parent 类的构造函数被执行，并在控制台输出 "Parent constructor called"。然后，Child 类的构造函数被执行，输出 "Child constructor called"。

注意事项

就像任何强大的工具一样，super 关键字也有一些注意事项：