Помогите разобрать до конца код

Question

<div id="menu">
<button data-action="save">Сохранить</button>
<button data-action="load">Загрузить</button>
<button data-action="search">Поиск</button>
</div>

<script>
function Menu(elem) {
this.save = function() {
  alert( 'сохраняю' );
};
this.load = function() {
  alert( 'загружаю' );
};
this.search = function() {
  alert( 'ищу' );
};

var self = this;     // зачем тут this, объясните пожалуйста дав полноценный ответ

elem.onclick = function(e) {
  var target = e.target;
  var action = target.getAttribute('data-action');
  if (action) {
    self[action]();  // как работает это выражение?
  }
};
}

new Menu(menu);

Answer 1

В данном случае функция Menu используется в качестве конструктора. При ее вызове с оператором new: new Menu(menu), внутри нее this указывает на новый создаваемый объект.

Внутри обработчика клика, this уже будет указывать на элемент, по которому кликнули и чтобы вызывать внутри обработчика методы создаваемого объекта Menu, ссылка на этот объект сохраняется в переменную self, которая и используется внутри обработчика.

Подробнее про потерю контекста можно узнать в вопросе: Потеря контекста вызова

---

Для обращения к полям объекта в яваскрипте предусмотрено две нотации

1. Dot-notation - обращение к полю через точку

   var o = {
     prop: 1;
   };
   o.prop;// 1
   

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

2. Bracket-notation - обращение к полю с использованием скобок []

   var o = {
     prop: 1;
   };
   o["prop"];// 1
   

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

В данном случае, как раз имя свойства определяется в момент клика, и выполняется соответствующая функция.

---

Без промежуточной переменной можно обойтись, если использовать стрелочные функции

function Menu(elem) {
  this.save = function() {
    console.log('сохраняю');
  };
  this.load = function() {
    console.log('загружаю');
  };
  this.search = function() {
    console.log('ищу');
  };
elem.onclick = (e) => {
    var target = e.target;
    var action = target.getAttribute('data-action');
    if (action) {
      thisaction;
    }
  };
}
new Menu(menu);

<div id="menu">
  <button data-action="save">Сохранить</button>
  <button data-action="load">Загрузить</button>
  <button data-action="search">Поиск</button>
</div>

Answer 2

function Menu(elem) {
    this.save = function() {
        alert( 'сохраняю' );
    };

    this.load = function() {
        alert( 'загружаю' );
    };

   this.search = function() {
       alert( 'ищу' );
   };

   var self = this;  // тут self будет равен объекту данной функции (класса) Menu

   elem.onclick = function(e) {
       var target = e.target;
       var action = target.getAttribute('data-action'); // данные атрибута в котором записано имя метода
       if ( action ) {
           self[action]();  // вызываем метод нашего объекта Menu
       }
   };
}

new Menu(menu);

Описал то что спрашивали ))

Answer 3

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