我希望在vue2+elementui+typescript的项目里为Array扩展一个group函数，使其可以完成类似以下方式的调用。它可以正常的被调用，我的问题是，在我申明代码编写完毕并没有任何调用的情况下。打开我的页面，点击页面任何地方或按下任何按键，都将会执行我的group函数，并且打印错误，不知何时调用，为何会被调用，Debug之后发现 this 指针并非Array对象，而是一个函数(似乎是我的keyFunction，似乎可以得知，并非是Array对象调用了group，而是直接调用了我的keyFunction，导致this指针指向了一个函数)。若是我主动调用，它又会正常执行我的我的group。我不明白此点击事件何时执行了我的 Array.group， 详情如下

点击页面会产生

点击按钮会出现的情况（@click.stop 并不能避免该情况）

// 调用代码
const data: Array<{ name: string }> = [{ name: 'name1' }, { name: 'name2' }, { name: 'name2' }, { name: 'name3' }, { name: 'name1' }, { name: 'name1' }, { name: 'name3' }]
  console.log(data.group(x => x.name, x => x))

我的声明是这样的
声明文件

// ArrayExtend.d.ts
interface Array<T> {
  group<K, TG>(keyFunction: (t: T) => K, valueFunction: (t: T) => TG): Map<K, TG[]>
}

定义文件

//ArrayUtils.ts
Array.prototype.group = function <T, K, TG>(keyFunction: (t: T) => K, valueFunction: (t: T) => TG): Map<K, TG[]> {
  const map = new Map<K, Array<TG>>()
  this.forEach(item => {
    const key = keyFunction(item)
    const value = valueFunction(item)
    const values = map.get(key) ? map.get(key) : []
    values!.push(value)
    map.set(key, (values as TG[]))
  })
  return map
}