title: How to properly extend ES6 Map
body: <p>I have a simple case: a ES6 <code>Map</code>, and I need to add custom <code>get()</code> and <code>set()</code> to it.</p>
  <p>But <code>Map</code> is a built-in object, so I'm not sure whether there would be any caveats in doing so. I've tried to search whether it is correct to subclass a <code>Map</code>, and got inconsistent results: it is unclear whether it's allowed by specification, what browser/node.js versions support it, and what side-effects are possible (and what to cover with tests).</p>
  <p>As I understand, there are three main approaches to extend <code>Map</code> functionality:</p>
  <ol>
  <li><strong>Subclass it.</strong> That I've done, and it <em>seems</em> like it works.</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>class CustomMap extends Map{
      get(key){
          return super.get(key);
      }
      set(key, value){
          return super.set(key, value);
      }
  }
  </code></pre>
  <p>Problem with it: a lot of articles on the Internet state that you can run into troubles with extending built-in objects. Most are early 2016, and now is late 2017, testing in Chrome 61. Maybe now it is a safe and supported way of doing it?</p>
  <ol start="2">
  <li><strong>Make a wrapper object</strong></li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>const Wrapper = function(){
      this._map = new Map();
      this.get = (key) =&gt; {return this._map.get(key);}
      this.set = (key, value) =&gt; {this._map.set(key, value);}
      ... everything else
  }
  </code></pre>
  <p>The least elegant solution, as I need to implement not just <code>get</code> and <code>set</code>, but <em>all</em> of Map functionality. Also, <code>Wrapper</code> is not an instance of <code>Map</code>.</p>
  <ol start="3">
  <li><strong>Use ES6 Proxy</strong></li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>const ProxyMap = function(){
      return new Proxy(new Map(), {
          get(target, key){
              return target.get(key)
          }
          set(target, key, value){
              target.set(key, value);
          }
      }
  }
  </code></pre>
  <p>As with extending a class, it is unadvisable to apply <code>Proxy</code> to some built-in types. But again, a lot of time passed since introducing the <code>Proxy</code> specifications; maybe now <code>Map</code> could by proxied in modern browsers?</p>
  <p>So, the question is: what way of extending a <code>Map</code> is a correct and robust way in 2017?</p>