Indirectly accessing iterator returning something empty

If I have a constructed object, and that object has an array property, and I define the Symbol.iterator of the prototype to point to the Symbol.iterator of the internal array, somehow I don’t get the same iterator out.

Here’s a minimum example:

const thing = function () {
  this.internalArray = [1, 2, 3, 4, 5];
}

Object.defineProperty(thing.prototype, Symbol.iterator, {
  get: function () { return this.internalArray[Symbol.iterator]; }
});

const test = new thing();
const a = test.internalArray[Symbol.iterator]();
const b = test[Symbol.iterator]();
console.log(a); // => Array Iterator {}
console.log(b); // => Array Iterator {}
console.log(a.next()); // => { value: 1, done: false }
console.log(b.next()); // => { value: undefined, done: true }

I cannot fathom why this is happening.

Answer

When returning the iterator, you need to bind it to the this.internalArray array instance, else all you have is Array.prototype[Symbol.iterator], which will not iterate over anything that’s directly on the test object.

const thing = function () {
  this.internalArray = [1, 2, 3, 4, 5];
}

Object.defineProperty(thing.prototype, Symbol.iterator, {
  get: function () { return this.internalArray[Symbol.iterator].bind(this.internalArray); }
});

const test = new thing();
const b = test[Symbol.iterator]();
console.log(b); // => Array Iterator {}
console.log(b.next()); // => { value: undefined, done: true }