JavaScript 类继承
JavaScript 类继承
类继承
如需创建类继承，请使用 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;
}
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class 继承</h1>
<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;
}
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
</script>
</body>
</html>
运行结果：
Javascript Class 继承 请使用 "extends" 关键字从另一个类继承所有方法。 使用 "super" 方法调用父级的构造函数。 I have a Ford, it is a Mustang
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
super() 方法引用父类。
通过在 constructor 方法中调用 super() 方法，我们调用了父级的 constructor 方法，获得了父级的属性和方法的访问权限。
继承对于代码可重用性很有用：在创建新类时重用现有类的属性和方法。
Getter 和 Setter
类还允许您使用 getter 和 setter。
为您的属性使用 getter 和 setter 很聪明，特别是如果您想在返回它们之前或在设置它们之前对值做一些特殊的事情。
如需在类中添加 getter 和 setter，请使用 get 和 set 关键字。
示例代码：
为 "carname" 属性创建 getter 和 setter：
class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Gettter/Setter</h1>
<p>演示如何在类中添加 getter 和 setter，以及如何使用 getter 获取属性值。</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
</script>
</body>
</html>
运行结果：
Javascript Class Gettter/Setter 演示如何在类中添加 getter 和 setter，以及如何使用 getter 获取属性值。 Ford
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：即使 getter 是一个方法，当你想要获取属性值时也不要使用括号。
getter/setter 方法的名称不能与属性名称相同，在本例中为 carname。
许多程序员在属性名称前使用下划线字符 _ 将 getter/setter 与实际属性分开：
示例代码：
您可以使用下划线字符将 getter/setter 与实际属性分开：
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Gettter/Setter</h1>
<p>在 JavaScript 中使用 getter/setter 时，使用下划线字符是常见做法，但不是强制性的，您可以随意命名它们，但不能与属性名称相同。</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
运行结果：
Javascript Class Gettter/Setter 在 Javascript 中使用 getter/setter 时，使用下划线字符是常见做法，但不是强制性的，您可以随意命名它们，但不能与属性名称相同。 Ford
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如需使用 setter，请使用与设置属性值相同的语法，不带括号：
示例代码：
使用 setter 将汽车名称更改为 "Volvo"：
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Setter</h1>
<p>使用 setter 设置属性值时，请不要使用括号。</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
set carname(x) {
this._carname = x;
}
get carname() {
return this._carname;
}
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
运行结果：
Javascript Class Setter 使用 setter 设置属性值时，请不要使用括号。 Volvo
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Hoisting
与函数和其他 JavaScript 声明不同，类声明不会被提升。
这意味着您必须先声明类，然后才能使用它：
示例代码：
//您还不能使用该类。
//myCar = new Car("Ford")
//This would raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//现在您可以使用该类：
let myCar = new Car("Ford")
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 类没有被提升</h1>
<p>如果在声明类之前尝试使用类，则会出现错误。</p>
<p id="demo"></p>
<script>
//You cannot use the class yet.
//myCar = new Car("Ford")
//This would raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
let myCar = new Car("Ford")
</script>
</body>
</html>
运行结果：
Javascript 类没有被提升 如果在声明类之前尝试使用类，则会出现错误。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：对于其他声明，如函数，在声明之前尝试使用它时不会出错，因为 JavaScript 声明的默认行为是提升（将声明移到顶部）。
