小码哥的IT人生

JavaScript Class super 关键词

JavaScript基础 2022-06-08 10:34:15小码哥的IT人生shichen

JavaScript Class super 关键词

实例

创建一个名为 "Model" 的类,该类将通过使用 extends 关键字继承 "Car" 类的方法。

通过在构造方法中调用 super() 方法,我们将调用父类的构造方法,并可以访问父类的属性和方法:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}
class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}
mycar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = mycar.show();

完整实例:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 类继承</h2>
<p>使用 “extends” 关键字从另一个类继承所有方法。</p>
<p>使用 “super” 方法调用父级的构造函数。</p>
<p id="demo"></p>
<script>
class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}
class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}
mycar = new Model("Tesla", "Model3");
document.getElementById("demo").innerHTML = mycar.show();
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

定义和用法

super 关键字引用父类。

它用于调用父类的构造函数并访问父类的属性和方法。

提示:要更好地理解“继承”的概念(父类和子类),请阅读我们的 JavaScript 类教程

浏览器支持

Keyword Chrome IE Firefox Safari Opera
super 42.0 13.0 45.0 9.0 36.0

语法

super(arguments);  // 调用父构造函数(仅在构造函数内)
super.parentMethod(arguments);  // 调用父方法

技术细节

JavaScript 版本: ECMAScript 2015 (ES6)

相关页面

JavaScript 教程:JavaScript 类

JavaScript 教程:JavaScript ES6 (EcmaScript 2015)

JavaScript 参考手册:extends 关键字

JavaScript 参考手册:constructor() 方法

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024