это в объекте просто нажал кнопку - PullRequest
Новая
       7

это в объекте просто нажал кнопку

0 голосов
/ 02 декабря 2018

Я не могу выполнить метод из другого метода в объекте: 

(() => {
  const wordCounter = {
    getText: function() {
       console.log(document.getElementById('textarea').innerHTML);
    },
    fireCounter: function() {
      console.log(this);
      this.getText();
    }
  }
  document.getElementById('button').addEventListener('click', wordCounter.fireCounter);
})();

в этом примере this это просто кнопка, которая имеет eventListener.Что я делаю не так? demo

Uncaught TypeError: this.getText не является функцией

Ответы [ 3 ]

0 голосов
/ 02 декабря 2018

это мое решение: 

(() => {
  const wordCounter = {
    text: '',
    getText: function() {
       console.log(document.getElementById('textarea').value);
    },
    fireCounter: function() {
      console.log(this);
      wordCounter.getText();
    }
  }
  document.getElementById('button').addEventListener('click', wordCounter.fireCounter);
})();

С помощью «this» вы пытаетесь вызвать функцию вне константы «wordCounter».Таким образом, вместо «this» следует вызывать константу, а затем функцию.

0 голосов
/ 02 декабря 2018

Обработчик событий действительно изменит контекст вашей функции, но реальная проблема заключается в том, что, вынимая функцию из ее объекта, вы также отделяете ее от исходного контекста.

Пример: 

var answer = {
  value: 42,
  get: function () {
    return this.value;
  }
};

console.log(
  answer.get()
);

var getAnswer = answer.get;

console.log(
  getAnswer()
);

Зная, что тогда у вас есть два варианта:

  1. не извлекайте функцию из объекта. 
button.addEventListener('click', function () {
  wordCounter.fireCounter();
});
убедитесь, что "автономный" fireCounter все еще связан со своим объектом с bind 
button.addEventListener('click', wordCounter.fireCounter.bind(wordCounter));
0 голосов
/ 02 декабря 2018

Обработчики событий изменят контекст этого, привязав его к кнопке с прослушивателем событий.вам нужно повторно привязать это к функции обработки: 

 document.getElementById('button').addEventListener('click', wordCounter.fireCounter.bind(wordCounter));

Я бы предупредил вас, что это не оптимальное решение, так как вы теряете доступ к элементу, по которому щелкнули (кроме e.target)

Вы можете заключить вызов функции в обработчик, чтобы сохранить всю информацию, например так: 

(() => {
  const wordCounter = {
    text: '',
    getText: function() {
       console.log(document.getElementById('textarea').value); // <--
    },
    fireCounter: function() {
      console.log(this);
      this.getText();
    }
  }
  document.getElementById('button').addEventListener('click', () => {
    wordCounter.fireCounter();
  });
})();

Также используйте textarea.value, а не innerHTML

...