Array.prototype.forEach() not working when called on a proxy with a get handler
<p>I have the following proxy:</p>

<pre><code>const p = new Proxy({
  [Symbol.iterator]: Array.prototype.values,
  forEach: Array.prototype.forEach,
}, {
  get(target, property) {
    if (property === '0') return 'one';
    if (property === '1') return 'two';
    if (property === 'length') return 2;
    return Reflect.get(target, property);
  },
});
</code></pre>

<p>It's an array-like object, because it has numeric properties and the <code>length</code> property specifying the amount of elements. I can iterate it using a <code>for...of</code> loop:</p>

<pre><code>for (const element of p) {
  console.log(element); // logs 'one' and 'two'
}
</code></pre>

<p>However, the <code>forEach()</code> method is not working.</p>

<pre><code>p.forEach(element =&gt; console.log(element));
</code></pre>

<p>This code doesn't log anything. The callback function is never called. Why isn't it working and how can I fix it?</p>

<p>Code snippet:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const p = new Proxy({
  [Symbol.iterator]: Array.prototype.values,
  forEach: Array.prototype.forEach,
}, {
  get(target, property) {
    if (property === '0') return 'one';
    if (property === '1') return 'two';
    if (property === 'length') return 2;
    return Reflect.get(target, property);
  },
});

console.log('for...of loop:');
for (const element of p) {
  console.log(element);
}

console.log('forEach():');
p.forEach(element =&gt; console.log(element));</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>