-1

После того как я в методе GetEventObject вместо calculator.OperationNumber(Iner) прописал this.OperationNumber(Iner), калькулятор перестал работать.

Прошу ответа с объяснением.

calculator = {

                Plus: document.getElementById('plus'),
                Minus: document.getElementById('minus'),
                Input1: document.getElementById('numb1'),
                Input2: document.getElementById('numb2'),

                start: function () {
                    
                    this.Plus.addEventListener('click', calculator.GetEventObject);
                    this.Minus.addEventListener('click', calculator.GetEventObject); 

                },

                GetEventObject: function() {

                    Iner = event.currentTarget.innerHTML;
                    this.OperationNumber(Iner);

                },

                OperationNumber: function(Code) {

                    Numb1 = Number(this.Input1.value);
                    Numb2 = Number(this.Input2.value);

                    if (Code === "+") {
                        total = Numb1 + Numb2;
                    };

                    if (Code === "-") {
                        total = Numb1 - Numb2;
                    };

                    alert(total);

                },



            };

            calculator.start();
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link href="index2.css" rel="stylesheet" type="text/css">
</head>
<body>

    <button id="plus">+</button>
    <button id="minus">-</button>

    <input type="number" name="numb" id="numb1">
    <input type="number" name="numb" id="numb2">
</body>  
</html>
  

2
  • А как должно происходить взаимодействие с this, если экземпляр не создан? 13 сен 2021 в 8:27
  • @АлексейШиманский, какой экземпляр, это же уже объект...
    – Qwertiy
    13 сен 2021 в 10:33

1 ответ 1

0

Дело в том ,что функция GetEventObject вызывается не при помощи методов объекта calculator , а через событие элемента. То есть в this (GetEventObject) будет приходить элемент а не объект calculator. Вам нужно вручную "присвоить" для GetEventObject другой this (calculator).

Это можно сделать через bind.

Вот как это делается

Код без bind:

const SmartObject = {
    testElem:document.getElementById('test'),
    SetEvent:function(){
        this.testElem.addEventListener('click',this.$this)
    },
    $this:function(){
       console.log(this)
    }
}
SmartObject.SetEvent();
    <div id="test">CLICK</div>

Код с bind:

const SmartObject = {
    testElem:document.getElementById('test'),
    SetEvent:function(){
        this.testElem.addEventListener('click',this.$this.bind(this)) /// это всё что изменилось
    },
    $this:function(){
       console.log(this)
    }
}
SmartObject.SetEvent();
   <div id="test">CLICK</div>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.