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 Inheritance</h1>

<p>Use the "extends" keyword to inherit all methods from another class.</p>
<p>Use the "super" method to call the parent's constructor function.</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;
  }
}

const myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
</script>

</body>
</html>

super() 方法引用父级 班级。

通过调用 super() 方法 构造函数方法,我们调用父级的构造函数方法并访问 父级的属性和方法。

继承对于代码可重用性很有用:创建新类时重用现有类的属性和方法。



Getter 和 Setter

类还允许您使用 getter 和 setter。

为您的属性使用 getter 和 setter 可能是明智之举,尤其是在以下情况下 您想在返回值之前或之前对值做一些特殊的事情 你设置它们。

要在类中添加 getter 和 setter,请使用 getset 关键字。

例子

为“carname”属性创建一个 getter 和一个 setter:

 class Car {
  constructor(brand) {
    this.carname 
  = brand;
  }
  get cnam() {
    
  return this.carname;
  }
  set cnam(x) {
    
  this.carname = x;
  }
}
const myCar = new Car("Ford");

  document.getElementById("demo").innerHTML = myCar.cnam;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>A demonstration of how to add getters and setters in a class, and how to use the getter to get the property value.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}

const myCar = new Car("Ford");

document.getElementById("demo").innerHTML = myCar.cnam;
</script>

</body>
</html>

注意:即使 getter 是一个方法,在调用时也不要使用括号 想要获得财产价值。

getter/setter 方法的名称不能与 getter/setter 方法的名称相同 属性,在本例中是 carname

<p>许多程序员使用下划线字符_ 在属性名称之前将 getter/setter 与实际属性分开:

例子

您可以使用下划线字符将 getter/setter 与 实际财产:

 class Car {
  constructor(brand) {
    this._carname 
  = brand;
  }
  get carname() {
    
  return this._carname;
  }
  set carname(x) {
    
  this._carname = x;
  }
}
const myCar = new Car("Ford");

  document.getElementById("demo").innerHTML = myCar.carname;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>Using an underscore character is common practice when using getters/setters in JavaScript, but not mandatory, you can name them anything you like, but not the same as the property name.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

const myCar = new Car("Ford");

document.getElementById("demo").innerHTML = myCar.carname;
</script>

</body>
</html>

要使用setter,请使用与设置属性值时相同的语法,不带括号:

例子

使用设置器将汽车名称更改为“Volvo”:

 class Car {
  constructor(brand) {
    this._carname 
  = brand;
  }
  get carname() {
    
  return this._carname;
  }
  set carname(x) {
    
  this._carname = x;
  }
}
const myCar = new Car("Ford");
  myCar.carname = "Volvo";
  document.getElementById("demo").innerHTML = myCar.carname;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Setters</h1>
<p>When using a setter to set a property value, you do not use parantheses.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(brand) {
    this._carname = brand;
  }
  set carname(x) {
    this._carname = x;
  }
  get carname() {
    return this._carname;
  }
}

const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
</script>

</body>
</html>

吊装

与函数和其他 JavaScript 声明不同,类声明不会被提升。

这意味着您必须先声明一个类,然后才能使用它:

例子

 //You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car {	  constructor(brand) {
    this.carname = brand;	  }
}
//Now you can use the class:
const myCar = new Car("Ford")

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes are not Hoisted</h1>
<p>You will get an error if you try to use a class before it is declared.</p>

<p id="demo"></p>

<script>
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

//Now you can use the class:
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;

</script>

</body>
</html>

注意:对于其他声明,例如函数,您不会得到 当您尝试在声明之前使用它时会出错,因为默认行为 JavaScript 声明正在提升(将声明移动到顶部)。