React项目中如何引入使用另一文件中定义的原型扩展方法？

这类挂载在原生原型上的扩展本质是带全局副作用的执行代码，不需要导出具体的方法变量，只要保证代码在你使用扩展方法之前执行即可，有两种常用方案：

方案1：全量直接导入（适合全项目通用的扩展） #

你不需要修改functions.js里的原型扩展代码，直接在app.js的最顶部执行全模块导入即可：

// app.js 首行添加
import './functions.js'

ES模块有单例特性，同一个文件哪怕被多次导入，也只会执行一次顶层代码，不会出现重复挂载覆盖原型的问题。导入完成后所有页面/组件里都可以直接调用扩展方法：

// 任意位置都可以直接调用
document.querySelector('.box').findRect()

注意：你示例里用箭头函数写原型方法是错误的，箭头函数没有独立的this指向，无法获取到调用方法的HTMLElement实例，必须改为普通函数写法：

HTMLElement.prototype.findRect = function() {
  console.log("CODE HERE...", this) // this指向当前调用方法的元素实例
}

方案2：封装初始化函数按需导入（适合部分场景使用的扩展） #

如果不想全量挂载所有原型扩展，避免不必要的全局污染，可以把同类型的扩展封装成初始化函数按需调用：

// functions.js 里的写法
export function initElementExtends() {
  HTMLElement.prototype.findRect = function() {
    console.log("CODE HERE...")
  }
  // 其他HTMLElement相关的扩展都可以放在这里
}

export function initArrayExtends() {
  Array.prototype.myFilter = function(callback) {
    const res = []
    for(let i =0; i<this.length; i++) {
      if(callback(this[i], i, this)) res.push(this[i])
    }
    return res
  }
  // 其他Array相关的扩展都可以放在这里
}

需要使用对应扩展的时候，先导入执行初始化函数即可：

// app.js 里按需导入
import { initElementExtends } from './functions.js'
// 执行初始化后才会挂载对应扩展
initElementExtends()

// 后续就可以正常调用
document.body.findRect()

内容的提问来源于stack exchange，提问作者user16779768