javascript - 如何动态地将方法添加到 javascript 对象而不会出现这个奇怪的错误

Question

我有一个 javascript 对象数组，

let headers = [
  {
    text: 'something',
    value: 'something else'
  },
  {
    text: 'something1',
    value: 'something else1'
  },
  // etc..
]

我想遍历数组并像这样向数组中的每个对象添加一个方法（忽略“this”，我正在使用vue）：

this.headers.map(h => {
    h['filter'] = function (value) {
        if (!this.filterValue) {
            return true;
        }

        return value.toLowerCase().includes(this.filterValue.toLowerCase());
    }
});

对我来说看起来不错，但是当我的循环完成时，该函数不起作用，我认为这与“arguments”和“caller”中的这个错误有关：

有关如何解决此错误的任何想法？

标签： javascriptvue.jsjavascript-objectses6-map

Answer 1

关键是this，你需要了解更多关于thisJS 的知识，并且在面试中被问到很多，运行这个代码片段并弄清楚this情况如何

function A(headers = [{
    text: 'something',
    value: 'something else'
  },
  {
    text: 'something1',
    value: 'something else1'
  },
  // etc..
], filterValue = 'else1') {
  this.filterValue = filterValue
  this.headers = headers.map(h => ({
    ...h,
    filter: () => {
      if (!this.filterValue) {
        return true;
      }

      return h.value.toLowerCase().includes(this.filterValue.toLowerCase());
    }
  }))
}

console.log(new A().headers.map(x => x.filter()))