Next.js中声明Object.prototype自定义方法出现img标签属性报错如何解决？

问题成因 #

• JavaScript中所有普通对象默认都继承自Object.prototype，你通过直接赋值的方式挂载到Object.prototype上的属性默认是可枚举的，会被所有对象的遍历逻辑（比如for...in、Object.keys、React的props属性遍历）读取到。
• React/Next.js在渲染原生DOM元素（比如你报错里的<img>标签）时，会遍历组件接收的所有props，尝试将合法属性传递给DOM元素。这时候遍历props对象就会读到原型上的_something方法，尝试将函数类型的值作为DOM属性写入，而DOM不支持函数类型的自定义属性，因此触发了你看到的警告。
• 挂载到Array.prototype不会出问题的原因是：组件的props是普通对象，继承链上没有Array.prototype，因此数组原型上的属性不会被props的遍历逻辑读取到，自然不会触发报错。

解决方案 #

• 方案1（推荐）：不要修改原生原型 #

修改Object.prototype属于非常不推荐的危险操作，会污染全局所有对象的原型链，极易引发各类不可预期的冲突。你可以改成用独立工具函数实现相同能力：

// 定义工具函数
function doSomething(obj, something) {
  console.log(something)
}

// 调用示例
const testObj = {}
doSomething(testObj, 'test content')

• 方案2：将原型属性设为不可枚举 #

如果你确实需要保留挂载到Object.prototype的写法，可以通过Object.defineProperty定义属性，将enumerable设为false，避免该属性被遍历逻辑读取：

Object.defineProperty(Object.prototype, '_something', {
  value: function (something) {
    console.log(something)
  },
  enumerable: false, // 设为不可枚举，不会出现在对象遍历结果中
  writable: true,
  configurable: true
})

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