Vue3+VueRouter4中扩展Object.prototype方法自动触发引发报错的问题求助

嘿，我遇到了一个挺头疼的问题，想请教大家：我给Object.prototype自定义了一个扩展方法，但我根本没在代码里调用或者导入它，结果却触发了报错，这在Vue2里好像没碰到过，有没有大佬知道怎么解决呀？

我的扩展方法代码是这样的：

Object.prototype.mergeObjXXXX = function(obj2){
     console.log(this);
     console.log(obj2);
}

使用的版本：

• Vue 3.5.13
• Vue Router 4.5.0

报错信息如下：

main.js:38 TypeError: Cannot convert undefined or null to object
    at Object.assign (<anonymous>)
    at Object.mergeObjXXXX (ext.js:20:9)
    at extractComponentsGuards (vue-router.js?v=ea680b7e:1465:32)
    at vue-router.js?v=ea680b7e:2484:16

问题原因分析 #

后来我排查了一下，发现问题出在Vue Router 4的内部逻辑里：它在执行extractComponentsGuards这个处理路由守卫的方法时，会遍历对象的属性。而我们直接给Object.prototype添加的方法默认是可枚举的，会被遍历到，这时候调用这个方法时，this可能是undefined或者null，就触发了Cannot convert undefined or null to object的错误。

解决方案 #

这里给你两个可行的解决思路：

• 优先推荐：改用独立工具函数
  直接扩展Object.prototype属于全局对象污染，很容易引发这类框架内部的意外问题，建议把合并逻辑改成独立的工具函数：

  function mergeObjXXXX(obj1, obj2) {
    console.log(obj1);
    console.log(obj2);
    // 这里写你的合并逻辑
  }
  

  调用的时候直接传两个对象就行：mergeObjXXXX(targetObj, sourceObj)。

• 如果一定要扩展原型：设置方法为不可枚举
  如果你坚持要给Object.prototype加方法，可以用Object.defineProperty把方法设置为不可枚举，这样框架遍历对象时就不会触发它了：

  Object.defineProperty(Object.prototype, 'mergeObjXXXX', {
    value: function(obj2) {
      console.log(this);
      console.log(obj2);
      // 这里写你的合并逻辑
    },
    enumerable: false, // 关键：设为不可枚举
    writable: true,
    configurable: true
  });
  

备注：内容来源于stack exchange，提问作者padavan