Get property of class from an instance of subclass

Question

As far as I know, the __proto__ property of a constructor is considered deprecated. Is there a better way to access a property of the parent class from a created instance of its subclass?

Example:

In the following example, the requested property is 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;
}

Object.getPrototypeOf() ? But why do you need to access the super class? If you are doing this a method, you can just use super. I don't think the code that works with an instance of a class should make any assumptions about its implementation. — Felix Kling
– Felix Kling, Commented Jun 28, 2019 at 5:43
It's related to obtaining the appropriate CSS classes for my styles to take effect @FelixKling. I've updated the snippet to illustrate my goal clearer. — Angel Politis
– Angel Politis, Commented Jun 28, 2019 at 6:01

Felix Kling · Accepted Answer · 2019-06-28 06:11:13Z

You could use static methods and 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;
}

This allows sub classes to determine themselves how they want to build the class list.

If you always want to add the CSS class of the base class, why not access it directly?

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;
}

Thank you, Felix. I needed this __proto__ out of my code 😃

Collectives™ on Stack Overflow

Get property of class from an instance of subclass

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related