Javascript 将箭头函数转换为常规函数？

我正在学习Wes Bos的Javascript 30

我正在学习AJAX类型先行课程，我试图限制我在这门课程上使用ES6的数量，只是为了练习

这是完成的版本：

请注意，在键入位置时，搜索的值在结果中以黄色突出显示

现在，确定这是displayMatches函数的javascript：

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

var displayMatches=function（）{
console.log（this.value）；
var matchArray=findMatches（this.value，cities）；
var html=matchArray.map（函数（位置）{
控制台日志（此处为“测试”）；
var regex=new RegExp（this.value，'gi'）；
var cityName=place.city.replace（regex，“+this.value+”）；
var stateName=place.state.replace（regex，“+this.value+”）；
返回`

${cityName}，${stateName}
${place.population}

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

问题在于函数变量

html

。目前，我将其作为：

var html=matchArray.map（函数（位置）{…}）

这不起作用，我将在结果中得到未定义

但是，如果我将其更改为箭头函数：

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

var html=matchArray.map（place=>{…}）

函数将运行，搜索的值将突出显示

有人能解释一下为什么在这个特定的上下文中，arrow函数起作用吗

---

提前谢谢

这是使用

这个
变量。当您在函数中使用此函数时，它将开始引用函数本身，而不是您希望它引用的函数

在使用前将值保存到另一个变量将为您带来好处

const value = this.value;
const html = matchArray.map(function(place) { 
const regex = new RegExp(value, 'gi'); 
   ...
});

在JavaScript中，函数是一流的对象，因为它们可以像任何其他对象一样具有属性和方法。作为一个副作用，在函数（匿名或其他）中使用
this
变量将导致函数引用自身，而不是面向对象编程中常见的类对象


箭头函数不绑定
此变量

箭头函数不会创建自己的this，this值
使用封闭的执行上下文

这是如何在你的代码笔中实现的
 问题在于，与箭头函数不同，
此
变量正在为新函数更新。您应该将
this
的值存储在一个新变量中，这样就不会在函数中丢失它

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

var displayMatches=function（）{
console.log（this.value）；
var=这个；
var matchArray=findMatches（this.value，cities）；
var html=matchArray.map（函数（位置）{
console.log（即，放置“test”）；
var regex=new RegExp（that.value，'gi'）；
var cityName=place.city.replace（regex，“+that.value+”）；
var stateName=place.state.replace（regex，“+that.value+”）；
返回`

${cityName}，${stateName}
${place.population}

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

有人能解释一下为什么在这个特定的上下文中，arrow函数起作用吗

箭头函数（根据定义）保留
this
的当前词法值。常规回调函数不支持。因此，当您使用常规回调函数时，您会丢失代码所依赖的
this
的正确值

您可以通过使用保留
this
当前作用域值的箭头函数，或通过将可选的
thisArg
传递到
.map（）
作为函数后面的参数来修复此问题

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

从for
Array.prototype.map
，您可以看到可选的
thisArg
：

因此，要使代码保留
this
而不使用箭头函数，可以将
thisArg
传递给调用
.map（）

很难说，一定是词汇范围。您的这个值可能不是您所想的。尝试使用transpiler:peven更有趣的是将外部函数转换为箭头函数。作为您的<代码>，仅使用值，如果您不能使它成为该方法的参数，那么它会使更多的选择，而不是传入代码< >值> /代码>作为他的函数的一个参数？@ Bergi，但他使用<代码>的方式。甚至目标容器也可以是参数。我还希望删除许多不同的
this
值；）@Icepickle哎呀，我误解了你的评论，我以为你建议把
这个.value
（而不是
这个
）作为
映射
函数的第二个参数。@Icepickle是的，把
城市
、
值
和
建议
作为函数的参数可能更好，但是，如果检查完整代码（在链接的代码笔中），您会看到
displayMatches
用作事件处理程序，并且
此.value
引用输入值。@Bergi可能是：）但是，在调用它的eventhandler周围包装一个函数，这将使它更具可重用性，并可能成为解决他的问题的建议。
var displayMatches = function(){
    let val = this.value;
    console.log(val);
    var matchArray = findMatches(val, cities);
    var html = matchArray.map(function(place){
        console.log(this, place, "test");
        var regex = new RegExp(val, 'gi');
        var cityName = place.city.replace(regex, "<span class='hl'>" + val + "</span>");
        var stateName = place.state.replace(regex, "<span class='hl'>" + val + "</span>");
            return `
          <li>
            <span class="name">${cityName}, ${stateName}</span>
            <span class="population">${place.population}</span>
          </li>
            `;
    }).join("");
    suggestions.innerHTML = html;
}