1

у меня есть функция, которая создает и возвращает объект с отрисовкой простого блока и навешивает ивентлисенеры на элемент этого блока. Но я, не могу понять, почему при срабатывании toggler, возникает ошибка "Cannot read property 'hidden' of undefined".

menu.toggler = function () {
console.log(this)
       this.header.addEventListener('click',  function () {
           console.log(this)
           this.list.hidden = !this.list.hidden;
       })
   };

Я обвесил этот блок консоль логами, чтобы понять, что в this. В первом случае - понятно, там объект от имени которого вызвана функция. Во втором, почему-то уже улемент H1, хотя я ожидал увидеть там объект menu. Если я, вместо this, ставлю menu или вместо обычной функции - стрелку, то всё работает. тут ссылка на код https://jsfiddle.net/marader/a7oq8mwc/8/ спасибо.


function initMenu(element) {
    let menu = {};
    menu.element = element;
    menu.render = function(){
        this.element.innerHTML = `<h1 class="header">Menu header</h1>
<ul class="list">
    <li class="item">123</li>
    <li class="item">234</li>
    <li class="item">3455</li>
</ul>
<input type="text" class="inp" placeholder="input text here!">
<button class="mybutton">Press me!</button>`
    };
menu.render();
    menu.header = element.querySelector('.header');
    menu.list = element.querySelector('.list');
    menu.inp = element.querySelector('.inp');
    menu.mybutton = element.querySelector('.mybutton');


   menu.toggler = function () {
       this.header.addEventListener('click',  function () {
           console.log(this)
           this.list.hidden = !this.list.hidden;
       })
   };
  




    return menu;
}
let div1 = initMenu(document.querySelector('.block'));
div1.toggler();
<div class="block"></div>

0

1 ответ 1

2
this.list.hidden = !this.list.hidden

не срабатывает из-за того, что меняется контекст. Вы объявили функцию, срабатывающую по клику для this.header, поэтому this внутри нее - это тот самый header, то есть элемент h1. Ошибка "Cannot read property 'hidden' of undefined" возникает потому, что у header нет (и не должно быть) свойства list. Для устранения контекста header сработает, например, стрелочная функция:

 menu.toggler = function () {
   this.header.addEventListener('click', () => {
       this.list.hidden = !this.list.hidden;
   })
 };
1
  • то, что у header нет нкакого list и как это пофиксить я понял сразу. Для меня большим удивлением было что this`ом внутри addEventListener стал header. Т.е. получается, что внутрь addEventListener всегда будет попадать то, что стоит до точки перед addEventListener? 30 мар 2021 в 11:50

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