При использовании Object.create() как вы ссылаетесь на ключи объекта с другими ключами объекта

Question

Я пытаюсь изучить Object.create, создав искусственный модуль калькулятора. я пробовал bind Я пытался удалить this, но без результатов.

ВОПРОС:

Как вы ссылаетесь на свойство объекта в другом свойстве элемента, как если бы вы использовали класс? Или мой пример не очень хороший образец? Если да, то как мне структурировать свой объект Calculator, чтобы позволить слушателям событий creation?

Calculator.js

const Calculator = {
  inputArr: [],
  init: (selector)=> {
    const el = document.querySelector(selector);
    el.addEventListener('click', this.pushValue); // this wont work.
    return this;
  },
  pushValue: (e) => {
    let val = e.target.value;
    if(val){
      this.inputArr.push(val);
      console.log(e.target, this.inputArr); // this wouldn't work.
    }
  }
};

const adder = Object.create(Calculator).init('#calc');

HTML:

<div id="calc">
  <button class="btns" value="1">1</button>
  <button class="btns" value="2">2</button>
</div>

Answer 1

Проблема в этом коде в том, что вы использовали функции со стрелками, но закрываете неправильную this, Функции стрелок закрывают над this где они определены, вместо того, чтобы установить его при вызове. В вашем случае это закрытие над this в глобальном масштабе.

Если вы делаете init а также pushValue нормальные функции и вызывать их через ссылки на объект, созданный через Object.create позвонят с правильным this:

const Calculator = {
  inputArr: [],
  init: function(selector) {                                 // ****
    const el = document.querySelector(selector);
    el.addEventListener('click', this.pushValue.bind(this)); // ****
    return this;
  },
  pushValue: function(e) {                                   // ****
    let val = e.target.value;
    if(val){
      this.inputArr.push(val);
      console.log(e.target, this.inputArr);
    }
  }
};

const adder = Object.create(Calculator).init('#calc');

Вам нужно bind призыв к pushValue от слушателя события (в противном случае, this будет ссылаться на элемент). Или поочередно, оберните это стрелкой:

el.addEventListener('click', e => this.pushValue(e));

Рабочий пример использования обёртки со стрелкой на this.pushValue:

const Calculator = {
  inputArr: [],
  init: function(selector) { // ****
    const el = document.querySelector(selector);
    el.addEventListener('click', e => this.pushValue(e)); // ****
    return this;
  },
  pushValue: function(e) { // ****
    let val = e.target.value;
    if (val) {
      this.inputArr.push(val);
      console.log(e.target, this.inputArr);
    }
  }
};

const adder = Object.create(Calculator).init('#calc');

<div id="calc">
  <button class="btns" value="1">1</button>
  <button class="btns" value="2">2</button>
</div>