了解引用同一对象中其他属性的 JavaScript 个对象属性（函数）

Question

所以我偶然发现了一个基于 React Hooks 的组件，它使用对象对各种功能进行分类以提高可读性。

例如

const MyComponent = (props) => {
  const utilities = {
    utility1: () => {
      // ...some functionality
    },
    utility2: () => {
      // ...some functionality
    },
  };
  
  const renderers = {
    renderer1: () => {
      // ...some rendering logic
    },
    renderer2: () => {
      // ...some rendering logic
      return (
        <span>{renderers.renderer1()}</span>
      );
    },
  };

  return (
    // ...rendering logic
  );
};

我想了解的是为什么 renderer2 即使调用 renderer1 也能正常工作？

我的理解是对象会在代码执行时被声明，直到所有属性都定义好才声明完成（这只是我的菜鸟理解，我可能完全错了）。

我真的很想知道为什么这段代码能正常工作，尤其是为什么它能正常工作？

另外，附带说明一下，与基于 Class 的组件相比，我觉得基于 Hooks 的组件可读性不是很好，这种方法试图缓解这个问题。 所以我想知道这是否是使基于 Hooks 的组件可读的最佳方法，或者是否有其他更好的方法？

Answer 1

我的理解是对象会在代码执行的时候被声明，直到所有的属性都定义好才声明完成

事实并非如此。变量声明提前发生 - 在编译时，在任何代码实际有机会运行之前。不过，对变量的赋值发生在运行时间。这包括评估分配的值。

所以在您所说的情况下，当正在评估分配给 renderers 的对象时，实际上已经声明了 renderers 变量。

此外，您还必须考虑这样一个事实，即 renderers.renderer1() 实际上并未作为此对象评估的一部分被调用 - 但仅在稍后实际调用 renderers.renderer2() 时才被调用，此时指向对象评估和分配都将完成，因此 renderers.renderer1() 将是您期望的。

了解引用同一对象中其他属性的 JavaScript 个对象属性（函数）

Understanding JavaScript object properties (functions) referencing other properties in same object

javascript

readability

javascript-objects

reactjs

react-hooks