'history'、no-restricted-globals 和 window.history

Question

所以我在 React 中遇到了一个问题，如果我尝试使用“历史”，我的代码将不会运行，告诉我这是“意外使用historyno-restricted-global”。

我求助于 StackOverflow 以获得帮助，令人惊讶的是，我能够找到我正在处理的问题的答案。

另一个使用建议的修复效果很好，但现在我很困惑为什么它首先起作用。

使用 redux，我通过 mapDispatchToProps 调用了一个方法。我需要将“历史”作为传入的变量之一放入，以便我可以将用户重定向回他们所在的上一页。

最初，我尝试仅使用“历史”本身作为变量，但是当我尝试编译时会出现“无限制全局”错误，因此我转向 StackOverflow。这是他们建议我尝试使用“window.history”的时候。起初我持怀疑态度，因为我不认为这么简单的东西可以解决我的问题，但瞧，它编译成功。

props.addExperience(data, history);

对比

props.addExperience(data, window.history);

window.history 有效。有人可以解释为什么 window.history 有效但历史本身不起作用吗？

“历史”究竟是什么？'window' 做了什么来解决这个问题？

编辑：这是我找到的原始 StackOverflow 帖子。虽然 Chasen Bettinger 能够解决这个问题，但他从未真正解释过窗口的原因。会解决这个问题。如果这里有人能做到这一点，那就太棒了。

Answer 1

您遇到的 linting 规则试图解决的问题是，隐式引用全局对象上的属性很容易导致错误。例如：

var status = false;
if (status) {
  console.log('status is actually truthy!');
}

在这里，status在顶层实际上是指window.status，它必须始终是一个字符串；分配false给它导致false变成'false'.

如果status是具有该规则的受限全局，则只有在status明确引用window.status. 这样，很明显你是故意指的是全局属性，这不是偶然的。

当您引用window.history而不是时，也会发生同样的事情history。例如，如果在前面的代码中定义了一个变量

var history;

然后使用

props.addExperience(data, history);

linter 不确定您是在尝试引用全局对象上的属性，还是您打错了字。因此，规则是为了让您明确指定该属性在window（或更正变量名称）上。

至于window.history实际是什么，请参阅 MDN：

的Window.history只读属性返回到记录对象，它提供了一个接口，用于操作浏览器会话历史（在标签或帧，当前页面被加载在访问过的网页）的引用。

例如

history.back();     // equivalent to clicking back button
history.go(-1);     // equivalent to history.back();
window.history.go(0); // refresh the current page
history.pushState(stateObj, "page 2", "bar.html"); // add an item to the history state