Why does Object.keys() and Object.getOwnPropertyNames() produce different output when called on a Proxy object with ownKeys handler? : <p>I have the following proxy:</p>

<pre><code>const p = new Proxy({}, {
  ownKeys(target) {
    return ['a', 'b'];
  },
});
</code></pre>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/ownKeys#Interceptions" rel="noreferrer">MDN</a> says that:</p>

<blockquote>
  <p>This trap can intercept these operations:</p>
  
  <ul>
  <li><code>Object.getOwnPropertyNames()</code></li>
  <li><code>Object.getOwnPropertySymbols()</code></li>
  <li><code>Object.keys()</code></li>
  <li><code>Reflect.ownKeys()</code></li>
  </ul>
</blockquote>

<p>Therefore, I expected <code>Object.getOwnPropertyNames()</code> and <code>Object.keys()</code> to produce the same output. However, <code>Object.getOwnPropertyNames(p)</code> returns <code>['a', 'b']</code> (as expected), but <code>Object.keys(p)</code> returns an empty array. Why is that?</p>

<p>Also, if I add a property to this object which is not returned by the <code>ownKeys</code> handler (for example <code>c</code>), it gets ignored by both functions (they don't change their output). However, when I add a property which is returned by the <code>ownKeys</code> handler (for example <code>a</code>), <code>Object.keys(p)</code> now returns <code>['a']</code>.</p>

<p>Code snippet:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const p = new Proxy({}, {
  ownKeys(target) {
    return ['a', 'b'];
  },
});

console.log(Object.getOwnPropertyNames(p)); // ['a', 'b']
console.log(Object.keys(p)); // []

p.c = true;
console.log(Object.getOwnPropertyNames(p)); // ['a', 'b']
console.log(Object.keys(p)); // []

p.a = true;
console.log(Object.getOwnPropertyNames(p)); // ['a', 'b']
console.log(Object.keys(p)); // ['a']</code></pre>
</div>
</div>
</p>
