JavaScript跨对象调用函数报错，寻求更规范的面向对象实现方案

嘿，这个问题在JavaScript面向对象开发里真的挺典型的，咱们先拆解下你遇到的问题，再聊聊更优雅、规范的解决思路～

问题根源分析 #

你原代码里的核心问题是作用域不匹配：ObjectTwoInstance是window.onload函数内部的局部变量，但ObjectOne的one_A方法却试图直接引用它——在函数外部的对象模板里根本访问不到这个局部变量，所以才会抛出未定义的错误。

你现在用的互相挂载实例的方法虽然能跑，但确实会让代码耦合度很高：如果以后要创建多个ObjectOne或ObjectTwo的实例，很容易搞混哪个实例绑定了哪个，维护起来特别麻烦。

更优的规范实现方式 #

1. 依赖注入（最推荐，解耦性极强） #

这是现代开发中处理对象依赖的标准做法：在创建实例时，把需要依赖的对象主动传递进去，让依赖关系变得明确、可控。

window.onload = function() { 
  // 先创建依赖的实例
  const objectTwoInstance = Object.create(ObjectTwo); 
  const objectOneInstance = Object.create(ObjectOne);
  
  // 把ObjectTwo实例注入到ObjectOne实例中
  objectOneInstance.setDependency(objectTwoInstance);
  
  objectOneInstance.one_A(); 
} 

const ObjectOne = { 
  // 新增方法用于接收依赖
  setDependency: function(objTwo) {
    this.objTwo = objTwo;
  },
  one_A : function(){ 
    this.objTwo.two_A(); 
  } 
} 

const ObjectTwo = { 
  two_A : function(){ 
    console.log("执行two_A的逻辑");
  } 
}

这种方式的好处是：每个ObjectOne实例可以绑定不同的ObjectTwo实例，灵活性拉满，而且完全解耦了两个对象模板，后续修改其中一个不会影响另一个。

2. ES6+ Class语法（贴近传统面向对象，可读性强） #

如果你的环境支持ES6及以上，用class语法来实现面向对象会更清晰，构造函数里直接传入依赖即可：

window.onload = function() { 
  const objectTwoInstance = new ObjectTwo();
  // 构造时直接传入依赖
  const objectOneInstance = new ObjectOne(objectTwoInstance);
  
  objectOneInstance.one_A();
}

class ObjectTwo {
  two_A() {
    console.log("执行two_A的逻辑");
  }
}

class ObjectOne {
  constructor(objTwo) {
    // 把依赖存到实例属性里
    this.objTwo = objTwo;
  }

  one_A() {
    this.objTwo.two_A();
  }
}

Class语法是现在JavaScript面向对象的标准写法，结构清晰，符合大多数开发者的认知，尤其适合复杂的业务场景，扩展和维护都很方便。

3. 明确的实例绑定（适合简单场景） #

如果你的场景很简单，确实需要两个实例互相调用，也可以优化你原来的写法，让绑定逻辑更清晰，避免变量名混淆：

window.onload = function() { 
  const objectOneInstance = Object.create(ObjectOne); 
  const objectTwoInstance = Object.create(ObjectTwo);
  
  // 明确绑定互相的实例（用语义化的属性名）
  objectOneInstance.objTwo = objectTwoInstance;
  objectTwoInstance.objOne = objectOneInstance;
  
  objectOneInstance.one_A(); 
} 

const ObjectOne = { 
  one_A : function(){ 
    this.objTwo.two_A(); 
  } 
} 

const ObjectTwo = { 
  two_A : function(){ 
    // 如果需要调用ObjectOne的方法，用this.objOne.one_A()即可
    console.log("执行two_A的逻辑");
  } 
}

这种方式比你原来的写法更清晰，用objTwo代替ObjectTwoInstance，避免和对象模板的名称混淆，但还是不如前两种方式解耦，适合简单的小型项目。

总结 #

优先推荐依赖注入或者ES6 Class的方式，它们能帮你更好地管理对象间的依赖，让代码结构更清晰，也符合现代JavaScript的开发规范。当你的代码复杂度提升时，这种规范的写法会让维护轻松很多～

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