2
(function(){
    const requestBtn = d.getElementById('reqestInfo');
    requestBtn.addEventListener('click', ()=>{ console.log(this) }, false)
})()

и надо привязать this к requestBtn

(function(){
    const requestBtn = d.getElementById('reqestInfo');
    requestBtn.addEventListener('click', ()=>{ console.log(this) }.bind(requestBtn), false)
})()

дает синтаксическю ошибку,но 

(function(){
    const requestBtn = d.getElementById('reqestInfo');
    requestBtn.addEventListener('click', function(){ console.log(this) }, false)
})()

получаеться правильно. Насколько я понимаю arrow func так же привязывают this к контексту или я что-то путаю

ddeadlink
  • 1,037
  • 3
    не совсем уверен, что дубликат, но помочь данный вопрос должен: Потеря контекста вызова – Grundy Aug 01 '16 at 12:11
  • я как раз смотрел этот вопрос, и там в принцыпе есть обьяснение но оно обьясняеться гранью между функциональным джс и обьектным, т.к по всех примерах присутствует присвоения какой то переменной ф-ии. А вот в случае с анонимными ф-ми - вопрос – ddeadlink Aug 01 '16 at 12:15
  • не, там абсолютно то же самое, не важно присвоили ли функцию переменной и вызывали или вызывали сразу при объявлении, поведение одно и то же – Grundy Aug 01 '16 at 12:16
  • хм нашел, После создания значение this нельзя поменять указанными выше способами. тогда придется делать более старым вариантом.. – ddeadlink Aug 01 '16 at 12:17
  • Написал ответ, но мне все больше кажется, что действительно дубликат. – Grundy Aug 01 '16 at 12:20

1 Answers1

4

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

Что это значит?

Это значит, что внутри функции будет значение this будет таким же, как и в момент создания.

Рассмотрим примеры из вопроса:

(function(){
    const requestBtn = d.getElementById('reqestInfo');
    requestBtn.addEventListener('click', ()=>{ console.log(this) }, false)
})()

Данный код выполняется внутри самовызывающейся функции. Внутри такой функции this -> глобальный объект, в данном случае window. Следовательно внутри обработчика, этот this сохранится.

Второй пример:

(function(){
    const requestBtn = d.getElementById('reqestInfo');
    requestBtn.addEventListener('click', ()=>{ console.log(this) }.bind(requestBtn), false)
})()

Здесь действительно синтаксическая ошибка, чтобы ее исправить нужно обернуть стрелочную функцию в круглые скобки

(()=>{ console.log(this) }).bind(requestBtn)

Но и это не поможет, так как у стрелочных функций нельзя сменить контекст, полученный при создании.

Теперь, почему работает последний пример:

(function(){
    const requestBtn = d.getElementById('reqestInfo');
    requestBtn.addEventListener('click', function(){ console.log(this) }, false)
})()

Потому что, при добавлении обработчика через функцию addEventListener, обработчик вызывается в контексте добавленного элемента. То есть, это по сути нормальное поведение, когда this внутри обработчика ссылается на элемент, и все пляски со сменой контекста обычно обусловлены тем, что в обработчике в качестве this хотелось видеть, не элемент, а какой-нибудь сторонний объект.

Grundy
  • 81,538