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

问题描述

所以我偶然发现了一个基于 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 时也能正常工作？

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

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

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

解决方法

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

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

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

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