Может кто-нибудь объяснить, что означает this.value в этом примере кода?

1

Я новичок в JavaScript и до сих пор учился, я недавно написал этот код, и он работает, но я не могу понять, что this.value ссылается в этом случае:

function displayMatches() {
 const matchArray = findMatches(this.value, cities); //what does this.value refer to?

 const html = matchArray.map(place => {

 const regex = new RegExp(this.value,'gi');

 const cityName = place.city.replace(regex,'<span class="hl">${this.value}
 </span>');

 const stateName = place.state.replace(regex,'<span class="hl">${this.value}
 </span>');

return '
<li>
  <span class="name">${place.city}, ${stateName}</span>
  <span class="population">${numberWithCommas(place.population)}</span>
</li>
';
}).join ('');
suggestions.innerHtml = html;
}

Я думал, что это относится к словамToMatch, вот весь код:

const cities = [];
fetch(endpoint)
  .then(blob => blob.json())
  .then(data => cities.push(...data));

function findMatches(wordToMatch) {
  return cities.filter(place => {
    const regex = new RegExp(wordToMatch, 'gi');
    return place.city.match(regex) || place.state.match(regex)
  });
}

function displayMatches() {
  const matchArray = findMatches(this.value, cities);
  const html = matchArray.map(place => {
   const regex = new RegExp(this.value, 'gi');
    const cityName = place.city.replace(regex, '<span class="hl">${this.value}</span>');
    const stateName = place.state.replace(regex, '<span class="hl">${this.value}</span>');
return '
  <li>
    <span class="name">${cityName}, ${stateName}</span>
    <span class="population">${numberWithCommas(place.population)}</span>
  </li>
';
  }).join('');
  suggestions.innerHTML = html;
}

const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');

searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);

Может ли кто-нибудь помочь объяснить это мне, чтобы я понял? Было бы очень признательно! Я нахожу весь метод.this() все еще очень запутанным.

  • 3
    Поскольку displayMatches используется в качестве обработчика события, значение this когда функция вызывается браузером, будет ссылкой на элемент DOM, связанный с событием.
  • 1
    ... и input элементы имеют свойство value , поэтому this.value обращается к свойству value ввода, к которому было подключено событие.
Показать ещё 1 комментарий
Теги:
methods

2 ответа

0
Лучший ответ

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

searchInput.addEventListener('change', displayMatches);

Вы слушаете элемент searchInput, тогда в displayMatches() это элемент searchInput.

Таким образом this.value является значением searchInput.value.

Вы получили это?

  • 0
    Большое спасибо за разъяснение этого для меня! Теперь я это понимаю.
  • 0
    Всегда пожалуйста @KatherineMichelle
0

Внутри функции значение этого зависит от того, как вызывается функция. Он относится к элементу DOM, который вызывает функцию.
Скажем, это ваш JavaScript:

function alertMessage () {
    alert(this.value);
}

И это ваш HTML:

<input type="text" onmousehover="alertMessage()" value="Test">

Когда мышь наведет элемент ввода, JavaScript будет предупреждать "Тест", потому что значение входа, с которым вы вызвали функцию, является Test.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню