Я новичок в 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() все еще очень запутанным.
когда вы вызываете какой-либо метод, связывающий какое-либо событие, это информация о том, какое это событие отправляет методу обработчика. В этой строке вашего кода:
searchInput.addEventListener('change', displayMatches);
Вы слушаете элемент searchInput, тогда в displayMatches() это элемент searchInput.
Таким образом this.value является значением searchInput.value.
Вы получили это?
Внутри функции значение этого зависит от того, как вызывается функция. Он относится к элементу DOM, который вызывает функцию.
Скажем, это ваш JavaScript:
function alertMessage () {
alert(this.value);
}
И это ваш HTML:
<input type="text" onmousehover="alertMessage()" value="Test">
Когда мышь наведет элемент ввода, JavaScript будет предупреждать "Тест", потому что значение входа, с которым вы вызвали функцию, является Test
.
displayMatches
используется в качестве обработчика события, значениеthis
когда функция вызывается браузером, будет ссылкой на элемент DOM, связанный с событием.input
элементы имеют свойствоvalue
, поэтомуthis.value
обращается к свойствуvalue
ввода, к которому было подключено событие.