Квадратные скобки для установки этого свойства в конструкторе

Question

Я пытаюсь собрать все элементы моего HTML-документа в объект JS. Посмотрите на эти два способа, первый работает, как и ожидалось, а использование конструктора не работает. Что я делаю не так?

var elements1 = {};

document.querySelectorAll('*[id]').forEach(function(element) {
  elements1[element.id] = element;
});

var elements2 = new Elements();

function Elements() {
  document.querySelectorAll('*[id]').forEach(function(element) {
    this[element.id] = element;
  });
}

console.log(elements1);
console.log(elements2);

<div id="division1"></div>
<div id="division2"></div>
<div id="division3"></div>

Answer 1

Значение this во второй функции указывает на экземпляр этой функции.Чтобы исправить это, вы можете использовать функции стрелок ES6, которые не позволяют им создавать свои собственные области.

function Elements() {
  document.querySelectorAll('*[id]').forEach((element) => {
    this[element.id] = element;
  });
}

Answer 2

Во втором примере this указывает на неправильное местоположение.

var elements1 = {};

document.querySelectorAll('*[id]').forEach(function(element) {
  elements1[element.id] = element;
});

var elements2 = new Elements();

function Elements() {
  var that = this;
  document.querySelectorAll('*[id]').forEach(function(element) {
    that[element.id] = element;
  });
}

console.log(elements1);
console.log(elements2);

<div id="division1"></div>
<div id="division2"></div>
<div id="division3"></div>