title: Accessors Composition in ES6 Classes
body: <p>Let's say I have a <code>Thing</code> class which I want to be both <code>Hideable</code> and <code>Openable</code>.</p>
  
  <p>Using a similar approach to <a href="https://youtu.be/PSGEjv3Tqo0?t=1398" rel="nofollow">Douglas Crockford's</a> object creation through composition, I have been able to "inherit" from multiple classes.</p>
  
  <p><strong>This approach does not work with accessors (getter/setters).</strong></p>
  
  <p>I need to use classes as it's a requirement. I'm also finding that I am duplicating functionality from class to class, but I don't want these to inherit from a base class.</p>
  
  <p>Any ideas?</p>
  
  <p>The progress I have made so far is in the below snippet:
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Openable {
  
    constructor(isOpen = false) {
      this._isOpen = isOpen;
    }
  
    get isOpen() {
      return this._isOpen + ' is stupid.';
    }
  
    set isOpen(value) {
      this._isOpen = value;
    }
  
  }
  
  
  class Hideable {
  
    constructor(isHidden = false) {
      this._isHidden = isHidden;
    }
  
    get isHidden() {
      return this._isHidden + ' is stupid.';
    }
  
    set isHidden(value) {
      this._isHidden = value;
    }
  
  }
  
  
  class Thing {
  
    constructor(config) {
      let { isOpen, isHidden } = config;
  
      let openable = new Openable(isOpen);
      this.isOpen = openable.isOpen;
  
      let hideable = new Hideable(isHidden);
      this.isHidden = openable.isHidden;
    }
  
  }
  
  
  let thing = new Thing({
    isOpen: true,
    isHidden: false
  });</code></pre>
  </div>
  </div>
  </p>