Javascript функций в ассоциативном массиве "не является функцией" - PullRequest
Новая
       4

Javascript функций в ассоциативном массиве "не является функцией"

0 голосов
/ 28 февраля 2020

Недавно я узнал Javascript В ES6 есть классы, поэтому я попробовал их, но мои функции всегда давали мне ошибки, говоря, что их не существует. Поэтому я создал псевдоклассы, используя javascript ассоциативные массивы. Это работало абсолютно нормально , пока я не добавил несколько новых методов.

Вот сообщение об ошибке, которое я получаю: 

EventListener.js:132 Uncaught TypeError: this.listen_for_tab_swap is not a function
at HTMLDivElement.<anonymous> (EventListener.js:132)
at Object.alert_eventlistener_of_tabs (EventListener.js:41)
at Object.new_tab (EventListener.js:59)
alert_eventlistener_of_tabs @ EventListener.js:41
new_tab @ EventListener.js:59
xhr.onreadystatechange @ EventListener.js:94
XMLHttpRequest.send (async)
(anonymous) @ EventListener.js:101

Вот соответствующее тело кода: 

const eventListener = {

     listen_for_tab_swap: function() {
         $(".footer button").on("click", function (event) {
             file_tabs.show_tab(event.target.innerText);
         });
     },

     listen_for_tabs_activation: function() {
         $("#AZ_content").on("tabs_loaded", function () {
             this.listen_for_tab_swap();
         });
     },

     listen: function() {
         $(function () {
             console.log("Yeah, I'm listening...");
             $(".menu").on("click", function (event) {
                 AZ_page_is_opened(event);
                 showTab(event, event.target.id.replace("Button", ""));
             });
         });
     }
 };

Пожалуйста, дайте мне знать, если какая-либо дополнительная информация необходима для устранения неполадок. Заранее спасибо за любую помощь.

1 Ответ

2 голосов
/ 28 февраля 2020

В js this является динамическим c. Это зависит от того, как вызывается функция. Я предполагаю, что вы используете jQuery, потому что он выглядит как синтаксис jQuery с первого взгляда, поэтому для вашего конкретного c случая все, что вам нужно знать, это то, что в jQuery (а также в обычном javascript) значение this в событии onclick - это элемент, вызвавший событие: 

{
  // ...

  listen_for_tabs_activation: function() {
     $("#AZ_content").on("tabs_loaded", function () {
         this.listen_for_tab_swap(); // this is AZ_content
     });
}

В приведенном выше коде вы пытаетесь вызвать $("#AZ_content")[0].listen_for_tab_swap() и жалуетесь, что HTML элемент не имеет метода с именем listen_for_tab_swap

Существует несколько способов исправить это. Самое простое, вероятно, сделать: 

eventListener.listen_for_tab_swap();

Вы также можете использовать функции стрелок для связывания this: 

{
  // ...

  listen_for_tabs_activation: function() {
     $("#AZ_content").on("tabs_loaded",() => { // this fixes `this`
         this.listen_for_tab_swap();
     });
}

Есть еще несколько способов решить эту проблему. Посмотрите этот ответ на другой связанный вопрос о том, как на самом деле ведет себя this: Как ключевое слово "this" в Javascript действует внутри литерала объекта?

...