JavaScript Class extends 关键词
JavaScript基础 2022-06-08 10:34:0714小码哥的IT人生shichen
JavaScript Class extends 关键词
实例
创建一个名为 "Model" 的类，它将继承 "Car" 类的方法：
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
定义和用法
extends 关键字用于创建另一个类（父级）的子类。
子类继承了另一个类的所有方法。
继承对于代码的可重用性很有用：创建新类时，重用现有类的属性和方法。
注释：从上面的例子可以看到，super() 方法引用了父类。通过在构造方法中调用 super() 方法，我们将调用父类的构造方法，并可以访问父类的属性和方法。
浏览器支持
| 关键词 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| extends | 49.0 | 13.0 | 45.0 | 9.0 | 36.0 |
语法
class childClass extends parentClass技术细节
| JavaScript 版本： | ECMAScript 2015 (ES6) |
|---|
相关页面
JavaScript 教程：JavaScript 类
JavaScript 教程：JavaScript ES6 (EcmaScript 2015)
JavaScript 参考手册：super 关键词
JavaScript 参考手册：constructor() 方法
