javascript - 从子类的实例中获取类的属性

Question

据我所知，__proto__构造函数的属性被认为已弃用。有没有更好的方法从创建的子类实例访问父类的属性？

例子：

在以下示例中，请求的属性是cls。

class Vehicle {
  constructor () {
    var div = document.createElement("div");
    var cls = this.constructor.__proto__.cls + " " + this.constructor.cls;
    div.setAttribute("class", cls);
    document.body.appendChild(div);
  }
}
class Car extends Vehicle {}
class Motorcycle extends Vehicle {}

Vehicle.cls = "vehicle";
Car.cls = "car";
Motorcycle.cls = "motorcycle";

let vehicle = new Vehicle();
let car = new Car();
let bike = new Motorcycle();

.vehicle {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: red;
}

.car {
  background-color: green;
}

.motorcycle {
  background-color: blue;
}

标签： javascriptecmascript-6es6-class

Answer 1

您可以使用静态方法和super：

class Vehicle {
  constructor () {
    var div = document.createElement("div");
    var cls = new.target.getCls();
    div.setAttribute("class", cls);
    document.body.appendChild(div);
  }
  
  static getCls() {
    return 'vehicle';
  }
}
class Car extends Vehicle {
  static getCls() {
    return 'car ' + super.getCls();
  }
}
class Motorcycle extends Vehicle {
  static getCls() {
    return 'motorcycle ' + super.getCls();
  }
}

let vehicle = new Vehicle();
let car = new Car();
let bike = new Motorcycle();

.vehicle {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: red;
}

.car {
  background-color: green;
}

.motorcycle {
  background-color: blue;
}

这允许子类自行确定他们希望如何构建类列表。

如果你总是想添加基类的 CSS 类，为什么不直接访问呢？

class Vehicle {
  constructor () {
    var div = document.createElement("div");
    var cls = Vehicle.cls + " " + new.target.cls;
    div.setAttribute("class", cls);
    document.body.appendChild(div);
  }
}
class Car extends Vehicle {}
class Motorcycle extends Vehicle {}

Vehicle.cls = "vehicle";
Car.cls = "car";
Motorcycle.cls = "motorcycle";

let vehicle = new Vehicle();
let car = new Car();
let bike = new Motorcycle();

.vehicle {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: red;
}

.car {
  background-color: green;
}

.motorcycle {
  background-color: blue;
}