I might be totally getting the wrong idea of classes but this is what I want to do.

I have a load of different colours each with their own set of shades. Each colour is made up of an array of R,G,B. I want to be able to create new colours and then access different formatted properties, like css rgba.

class Color {
  constructor(dark, light, white, id) {
    this.dark = dark;
    this.light = light;
    this.white = white;
  }
  rgba(shade, opacity = 1) {
    return `rgba(${this[shade].join(", ")}, ${opacity})`;
  }
}

const pink = new Color(
  [226, 155, 166], [240, 214, 219], [250, 245, 246]
);

//get rgba css string for a shade
console.log(pink.rgba("light"));

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

This works but it would be more initiative to be able to do something like this to access the css rgba string. Is this possible?

const rgba = pink.light.rgba();

CodePudding user response：

Use another class or object, and transform the constructor arguments into that instead of assigning strings to this.dark, etc.

const makeShade = arr => ({
  rgba: (opacity = 1) => `rgba(${arr.join(", ")}, ${opacity})`
});

class Color {
  constructor(dark, light, white, id) {
    this.dark = makeShade(dark);
    this.light = makeShade(light);
    this.white = makeShade(white);
  }
}

const pink = new Color(
  [226, 155, 166], [240, 214, 219], [250, 245, 246]
);

//get rgba css string for a shade
console.log(pink.light.rgba());

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>