jslint：功能超出范围[重复]答案

【问题标题】：jslint: function out of scope [duplicate]jslint：功能超出范围[重复]
【发布时间】：2016-05-09 15:52:52
【问题描述】：

我最近一直在玩 JS 和其他各种与 Web 相关的东西，并且在应用它的同时学到了整个东西。

出于兴趣，我将代码放入 JS 验证器 (jslint.com)，结果令人震惊。我确实理解大多数警告，但特别是有一个我无法理解。它读取'doSomething' is out of scope。基本上，这是相关部分，我相信。我的整个脚本的结构是这样的：准备函数开始，然后进入特定的函数。

$('document').ready(function () {
    $('#btn').click(function () {doSomething();});
});

function doSomething() {
    console.log('did something');
}

我想，如果一个变量在 if 表达式中声明并在其外部使用，则它是“超出范围”的。像这样：

function whatnot() {
    if (true) {
        var x = 10;
    }
    return x;
}

但这如何转化为我的问题？你能帮我理解这个问题，并为更好的代码结构提供示例（或指出一些可能有帮助的文章吗？）

提前致谢:)

【问题讨论】：

它超出了 document.ready 块的范围 - 这可能是警告的意思
不要猜测，请确保：如果您通过 JSLint 自己运行该 sn-p，它是否仍然告诉您它超出了范围？
如果你直接复制粘贴到 jslint.com 还是会发出警告，是的。
也许 $('document').ready(function () { $('#btn').click(function () {doSomething();}); }); 在定义 doSomething 之前执行。
每当我看到一个关于 JS Lint 的问题时，我都会感叹道格拉斯·克罗克福德（Douglas Crockford）未能记录（至少在错误消息附近的任何地方）他对什么是优质 JavaScript 的高度固执的想法。 .

标签： javascript scope jslint

【解决方案1】：

jslint 是错误的。该代码将在没有任何范围界定问题的情况下运行。

然而，作为样式问题，您可能希望在使用它的位置定义doSomething()上方。尽管 $('document').ready 在整个 DOM 被渲染之前不会被调用，并且直到脚本标签被完全解析之后才会发生这种情况。就风格而言，我更喜欢在调用方法之前定义它们，如果将函数定义移到 ready 块内，jslink 可能会很满意。

【讨论】：

在提供代码的情况下，根本没有机会在定义 doSomething 之前发生 ready 调用。没有关于它的“可能”。在执行任何分步代码之前处理函数声明。
@T.J.Crowder 实现了 jquery，当然可以。在你使用它的地方定义你的函数仍然是一个好习惯。
@KenKinder：这与 jQuery 无关。这就是 JavaScript 这种语言的定义方式。将ready 调用替换为直接调用doSomething()；仍然可以正常工作：jsfiddle.net/2se73shm 再次：在执行任何分步代码之前处理函数声明。关于您的“良好实践”评论，这纯粹是风格问题，双方都有很多论据；这里无关紧要。
有趣。我不知道;感谢您的解释。更新我的答案。

【解决方案2】：

如果您在 $('document').ready 行之前声明 doSomething 函数，那么 jslint 将停止抱怨超出范围的问题。

【讨论】：

赞成 Ken Kinder 的回答，因为它更好地解释了正在发生的事情。

【解决方案3】：

在 JavaScript 中，变量是hoisted，本质上这意味着变量声明被移动到脚本文件的顶部，但在声明之前保持未定义。

如果您将函数声明移到单击处理程序中的函数调用上方，超出范围的警告就会消失。

【讨论】：

“在 JavaScript 中，变量被提升，本质上这意味着变量声明被移动到脚本文件的顶部，但在声明之前保持未定义。” A）无关紧要，OP的问题是关于函数声明，它的行为不同； B) 不正确，除非您假设变量是用 let 声明的，而不是 var。 a = 42; console.log(a); var a = 67; 是 JavaScript 中完全有效（如果写得不好）的代码，输出 42。