Question

我正在查看React库代码。看完之后，我发现了一段特殊的代码，我无法理解它的重要性。有人可以帮忙吗？

var validateFormat = function () {};

{
  validateFormat = function (format) {
    if (format === undefined) {
      throw new Error('invariant requires an error message argument');
    }
  };
}

在这里为什么反应开发人员将validateFormat包装在花括号中？这样做有什么意义吗？

如果我执行以下操作，则其工作原理相同-

var validateFormat = function () {};

validateFormat = function (format) {
   if (format === undefined) {
   throw new Error('invariant requires an error message argument');
   }
};

Answer 1

阻止作用域是其babel-preset-fbjs的结果。如果查看original source，您会发现，该函数是根据__DEV__的值有条件定义的，该值在转换过程中已优化，因为它等效于process.env.NODE_ENV !== 'production'。

let validateFormat = () => {};

if (__DEV__) {
  validateFormat = function(format) {
    if (format === undefined) {
      throw new Error('invariant requires an error message argument');
    }
  };
}

Answer 2

此代码非常合理。

var v = function () {};

{
  v = function (format) {
    // actual code
  };
}

第一个赋值将v定义为一个空的占位符函数，以使代码不会中断。

第二个赋值包含函数的实际代码。它在 block范围中，这是一个合法的JS构造。

但是...由于变量提升，块作用域确定没有任何作用，这使与C / C ++专家期望相反的任何局部性均无效。许多人说JS中没有块作用域，这是错误的。有块范围，但是它无效（除了最近的let / const声明之外）。

因此，此代码的作用是滥用 invalid 块语法来在视觉上分隔代码的各个部分。

但是（这就是我想在这里发生的事情），我们在这里看到的只是一个 EXAMPLE 。我很好地提出了另一个非常合理的示例，例如：

var v = function () {};

{
  let localValue = 0;

  v = function (format) {
    // actual code using localValue
    localValue = 1;
  };
}

换句话说，您可能会在代码库中找到其他示例，这些示例利用let / const的块作用域确定并封装了如图所示的定义。您提供的示例只是没有利用这个机会，而是保留范围，因为：

它不会破坏或破坏代码；
均匀性；
将来可能会增加let / const来承担更多的责任。

这全都是我的猜测。

Answer 3

这里的括号是block statement。在这种情况下，它们没有任何作用，可以安全地省略。 Block scope与var不兼容。即使它是let，block语句也不会影响它，因为validateFormat已经在block语句之外定义了。

使用块语句的示例如下：

let validateFormat = function () {};

{
  // doesn't reassign validateFormat from outer scope
  let validateFormat = function (format) {
    if (format === undefined) {
      throw new Error('invariant requires an error message argument');
    }
  };
  // validateFormat from block scope is used here
}

// validateFormat from outer scope is used here

答案提供了技术上正确的解释。真正的问题在于，该问题包含的错误代码没有意义，因为粘贴代码时if (...)语句被省略了，如已接受的答案所示。

围绕此反应库代码的“ {”“}”花括号的含义是什么？

3 个答案: