JavaScript 类继承

最新推荐文章于 2025-06-09 22:17:06 发布

bettercat

最新推荐文章于 2025-06-09 22:17:06 发布

阅读量188

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 开发语言 ecmascript

原文链接：https://www.w3school.com.cn/js/js_class_inheritance.asp

JS 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了JavaScript中的类继承和getter/setter方法。通过extends关键字，子类可以继承父类的所有方法。示例中展示了如何创建一个Model类继承自Car类，并添加新的属性和方法。同时，文章讲解了getter和setter的使用，它们允许我们访问和修改对象的私有属性，确保数据的安全性。通过getter和setter，可以在不直接暴露属性的情况下，提供对属性的读取和设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如需创建类继承，使用 extends 关键字。使用类继承创建的类继承了另一个类的所有方法：

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();

super() 方法引用父类。

通过在 constructor 方法中调用 super() 方法，我们调用了父级的 constructor 中的方法，获得了父级的属性和方法的访问权限。

getter

使用关键词get

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;

即使 getter 是一个方法，当你想要获取属性值时也不要使用括号。getter/setter 方法的名称不能与属性名称相同，在本例中为 carname。可使用下划线字符 _ 将 getter/setter 与实际属性分开。

setter

使用关键词set

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;