javascript - if (foo !== null) 计算结果为 true，即使 foo 为 null

Question

在 javascript 中，我有一个日志输出选项，允许使用元素/选择器来指定输出日志/错误消息的位置。初始化时输出的格式如下:

var $messageOutput = options.messageOutputElement ? $(options.messageOutputElement) : null;

稍后通过日志函数使用它:

function outputMessage(msg)
{
    if ($messageOutput !== null)
    {
        messageNum++;
        var $messageOutput = $(options.messageOutputElement);
        var html = $messageOutput.html();
        html += '<b>' + messageNum + '</b><br/>' + msg + '<br/>';
        $messageOutput.html(html);
        $messageOutput.scrollTop($messageOutput[0].scrollHeight);
    }
}

问题是，即使 $messageOutput === null，outputMessage() 中的 if 语句也会失败。我已经使用 Chome 的调试器验证 $messageOutput 确实等于 null。事实上，无论如何它都会进入 if 语句。

任何人都可以告诉我为什么会发生这种情况吗？预先感谢您对此事的任何意见。

Answer 1

通过在函数作用域中声明“var $messageOutput”，您可以停止在全局作用域中引用该变量。因此，它不是指那个，而是指一个尚未在函数体内设置的变量，该变量是未定义的，而不是 null。您可能应该删除“var $messageOutput = $(options.messageOutputElement);”的“var”部分，这将使函数引用函数外部的 $messageOutput。

详细说明一下: “var”在您所在的范围内创建一个新变量，并且更容易混淆的是“var foo = function”之类的行为与“function foo”不同。以下是一些有趣的案例和解释，供您享受阅读乐趣:

var x = 5;

function f () {
  console.log(x):
  if (!x) {
   var x = 22;
  }
  return x;
}
function g () {
  console.log(x):
  if (!x) {
    x = 22;
  }
  return x;
}
f(); // prints nothing, and returns 22
g(); // prints 5, and returns the same value

有时您还需要注意的是，您可以在全局范围之外的声明之前引用函数，具体取决于函数的声明方式。例如:

function f () {
  console.log(f_sub);
  function f_sub () {
    return "subfunction of f";
  }
  return f_sub;
}
function g() {
  console.log(g_sub);
  var g_sub = function () {
    return "subfunction of g";
  }
  return g_sub;
}
f(); // prints and returns f_sub
g(); // prints undefined and returns g_sub

传统的函数声明可以在任何地方进行声明并在任何地方引用，但是将函数分配给变量意味着在执行该行之前无法引用它。