Зачем тут нужен this [дубликат]

119
20 ноября 2019, 01:40

На данный вопрос уже ответили:

  • Каким образом получить id при клике? 2 ответа

Есть функция, которая по нажатию на иконку включает музыку. В html в событии onclick в функции в качестве параметра прописан this? Для чего он там прописан?

let playIcon = "https://image.flaticon.com/icons/svg/149/149668.svg"; 
let pauseIcon = "https://image.flaticon.com/icons/svg/149/149670.svg"; 
 
function togglePlay(elm) { 
  var audio = elm.querySelector('audio'); 
  if (!audio) return; 
 
  audio.paused ? audio.play() : audio.pause(); 
  elm.querySelector('img').src = audio.paused ? playIcon : pauseIcon; 
} 
 
//2 пример без параметра 
let playIcon = "https://image.flaticon.com/icons/svg/149/149668.svg"; 
let pauseIcon = "https://image.flaticon.com/icons/svg/149/149670.svg"; 
 
function togglePlay() { 
     
  var audio = document.querySelector("audio"); 
     
  if (!audio)  
    return; 
     
  audio.paused ? audio.play() : audio.pause(); 
  document.getElementById("button").src = audio.paused ? playIcon : pauseIcon; 
}     
    
#button { 
  width: 40px; 
  height: 40px; 
}
<div class="myaudio-player" onclick="togglePlay(this)"> 
  <img src="https://image.flaticon.com/icons/svg/149/149668.svg" id="button"> 
  <audio> 
<source src="https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3" /> 
</audio> 
</div>

то есть можете объяснить какую роль он выполняет? Я знаю что это ссылка на объект, но тут как такового объекта нет, поэтому непонятно.

Answer 1

Думаю на этом примере Вы сможете понять зачем нужен this.

var myFunc = el => { 
  console.log(el.textContent); 
};
div { 
  cursor: pointer; 
}
<div onclick="myFunc(this)">Click</div> 
 
<div onclick="myFunc(this)">Click 2</div>

READ ALSO
JavaScript ООП, передать Jquery объект через bind
javascript

JavaScript ООП, передать Jquery объект через bind

В методе obr необходимо получить объект jquery, на котором сработало событиеКаким образом это можно сделать?

 110
LEFT JOIN Дублирует поля [MySQL]
MySQL

LEFT JOIN Дублирует поля [MySQL]

Столкнулся с проблемой дублирования полей при использовании LEFT JOIN в MySQL запросе

 142
Проблема с переносом текста
HTML

Проблема с переносом текста

проблема, собственно, в коде, почему не переносится текст? Слово: "Русагроимпортом" выходит за пределы и не переносится

 125
Отобразить Dropdown в Navbar
HTML

Отобразить Dropdown в Navbar

Не отображается Dropdown в Navbar, пример брал готового шаблона bootstrap, там всё отображается нормально, но у меня после нескольких нажатий на стрелочку...

 141