函数声明不应放在块中。使用函数表达式或将语句移动到外部函数的顶部

Question

我有以下代码：

if (typeof console === "object" && typeof console.error === "function") {
    function e(msg) {"use strict"; console.info(msg);}
}

jsLint给出了以下错误：

  

不应将函数语句放在块中。使用函数表达式或将语句移动到外部函数的顶部。

为什么会出现此错误及其含义是什么？

Answer 1

说明

从jsLintErrors页面了解警告Function statements should not be placed in blocks：

  

引发此错误以突出显示可能无法正常工作的代码。在大多数环境中，您的代码将运行时没有错误，但可能不是您期望的方式。在某些环境中，它可能会导致致命语法错误。

     

那是因为Function声明被提升到它们出现的范围的顶部。

     

因此，有条件地声明一个带有块语句的函数是不可能的。

实施例

让我们通过一个简单的例子探讨这个问题引发的问题：

if (true) {
    function example() {
        console.log('hello');
    }
}

最佳情况是您的代码令人困惑。在上面的例子中，看起来你想要做的只是声明访问函数如果条件为真。但是，当函数被提升到作用域的顶部时，它实际上将被解释为：

function example() {
    console.log('hello');
}
if (true) {}

这很危险，因为它看起来不像你原来的代码所期望的那样。条件块实际上是空的（并且是不必要的），并且每个人都可以访问该函数，无论条件是否为true或false。

最糟糕的情况是浏览器无法理解如何处理嵌套函数，并在尝试使用它时抛出语法错误。这取决于运行JavaScript的引擎。看起来Firefox就是这样一个引擎。如果在Firefox中运行以下代码，则在执行以下代码时将抛出错误：

if (true) {
    example();
    function example() {
        console.log('hello');
    }
}

如果打开控制台，则会看到以下错误：

解决方案

那你怎么解决这个问题？

使用函数赋值而不是函数声明

以下是一个快速细分：

// Declaration
function declarationFunction() {}

// Assignment
var assignmentFunction = function() {}

功能分配 未悬挂在示波器的顶部。
功能声明会被提升到范围的顶部。

因此，为了有条件地设置示例函数，只需在块中分配它，如下所示：

var example;
if (true) {
    example = function() {
        console.log('hello');
    }
}

Answer 2

如果阻止，你不应该在里面创建函数。你做得好多了：

var e = function(){};

if(typeof console === "object" && typeof console.error === "function"){
    e = function (msg){ ... };
}