Javascript 有人能解释一下这个代码示例中this.value的含义吗？

我是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;
}

函数displayMatches（）{
const matchArray=findMatches（this.value，cities）；//this.value指的是什么？
常量html=matchArray.map（位置=>{
const regex=new RegExp（这个.value，'gi'）；
const cityName=place.city.replace（regex，`${this.value}
`);
const stateName=place.state.replace（regex，`${this.value}
`);
返回`

${place.city}，${stateName}
${numberWithCommas（place.population）}

`;
}).加入（“”）；
suggestions.innerHtml=html；
}

我以为它指的是WordTomatch，下面是所有代码：

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);

const cities=[]；
获取（端点）
.then（blob=>blob.json（））
.then（data=>cities.push（…data））；
函数查找匹配（wordToMatch）{
返回城市。过滤器（位置=>{
const regex=new RegExp（wordToMatch，'gi'）；
return place.city.match（正则表达式）| | place.state.match（正则表达式）
});
}
函数displayMatches（）{
const matchArray=findMatches（this.value，cities）；
常量html=matchArray.map（位置=>{
const regex=new RegExp（this.value，'gi'）；
const cityName=place.city.replace（regex，`${this.value}`）；
const stateName=place.state.replace（regex，`${this.value}`）；
返回`

${cityName}，${stateName}
${numberWithCommas（place.population）}

`;
}).加入（“”）；
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

---

你明白了吗？

当你调用某个方法绑定某个事件时，这是该事件发送给handler方法的信息。在代码的这一行中：

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”警报，因为调用函数的输入值是函数内部的

Test

，其值取决于函数的调用方式。它引用调用函数的DOM元素
假设这是您的JavaScript：

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

这是您的HTML：

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

---

当鼠标悬停时，输入元素JavaScript将警告“Test”，因为调用函数的输入值是

Test

，因为

displayMatches

用作事件处理程序，当浏览器调用函数时，

this

的值将是对事件所涉及的DOM元素的引用，

input

元素具有

value

属性，因此，

this.value

访问连接事件的输入的

value

属性。请参阅文档：因为

displayMatches

用作事件处理程序，当浏览器调用函数时，

this

的值将是对事件所涉及的DOM元素的引用，

input

元素具有

value

属性，因此，

this.value

访问事件所连接的输入的

value

属性。请参阅文档：非常感谢您为我澄清这一点！我现在明白了。非常感谢你为我澄清这一点！我现在明白了。