将原型的方法传递给高阶函数javascript [重复]

Question

我如何使用原型的方法与this 在更高阶的函数（如reduce）中引用原型？

示例代码：

function A() {

  this.names = ["John", "Jane", "Doe"];

  this.printMergedNamesByIndexes = function() {
    const indicies = [0,1,2]
    console.log(indicies.reduce(this.mergeNames, ""))
  };

  this.mergeNames = function(accumulator, index) {
    return accumulator + this.names[index] + ", "
  };
}

const a = new A()
a.printMergedNamesByIndexes()

我想将原型的mergeNames 方法传递给reduce 函数，但在这种情况下，mergeNames 方法中的 this 值并不引用原型本身。所以我得到了一个错误：

TypeError: undefined is not an object (evaluating 'this.names[index]')

我发现了这个帖子：Using prototype functions in higher order functions in javascript，但 bind 方法给了我一个类似上面的错误，除了它抱怨不存在 bind 方法。

Answer 1

解决方案是使用 lambda/arrow 函数。

Arrow functions MDN web docs

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

这意味着将箭头函数传递给更高阶函数将捕获当前作用域的this 值。在这种情况下，这意味着它将原型对象捕获为this，因此我们可以在箭头函数中使用它的方法。

function A() {

  this.names = ["John", "Jane", "Doe"];

  this.printMergedNamesByIndexes = function() {
    const indicies = [0,1,2]
    console.log(indicies.reduce(this.merge, ""))
  };

  // Arrow function
  this.merge = (accumulator, index) => {
    // "this" referencing to the prototype
    return accumulator + this.names[index] + ", "
  };
}

const a = new A()
a.printMergedNamesByIndexes()