未找到外部文件中的 Javascript 函数

Question

我有以下 Javascript 文件:

function availableHeight() {
    var windowHeight = window.innerHeight;
    var headerHeight = $(".page-header").innerHeight();
    var marginPaddingEtc = 105;
    return windowHeight - marginPaddingEtc - headerHeight;
}

function setMapHeight() {
    availableHeight = availableHeight();
    $("#map").outerHeight(availableHeight);
}

它被命名为 utils.js 并放置在相对于我的 HTML 文件的 js/ 文件夹中。在 HTML 文件中，我导入 utils.js，如下所示:

<script type="text/javascript" src="js/utils.js"></script>

并使用body末尾的函数，例如:

<script>
$(document).ready(function () {
    $("#menu").load("demo_nav.html", function() {
        setMapHeight();
        var availableHeight = availableHeight();
        console.log(availableHeight);
    });
});
</script>

在 Firefox 44.0.2 中打开页面时，我在控制台中得到以下输出:

TypeError: availableHeight is not a function


var availableHeight = availableHeight();

最让我惊讶的是，setMapHeight() 被发现了，而 availableHeight() 却没有找到，即使它们位于同一个文件中!既然找到了，我就知道问题不在于导入。我正在调用 $(document).ready() 中的函数，因此到那时所有内容都应该已加载。我尝试重命名 var，以防声明替换函数，但这也没有解决问题。

我不知道为什么这不起作用。你能发现什么问题吗？

编辑:德米特里·洛斯库托夫的回答

setMapHeight() 正在重新定义全局名称，因为它没有使用 var 声明其变量。我把它改为

function setMapHeight() {
    var myAvailableHeight = availableHeight();
    $("#map").outerHeight(myAvailableHeight);
}

错误消失了。

谢谢

Answer 1

本地 availableHeight 变量被提升到其函数的顶部，遮蔽全局变量。

在您分配某些值之前，它具有默认的未定义值。但 undefined 不是一个函数，所以你不能调用它。

你的代码会变成这样

function availableHeight() { /* ... */ }
(function () {
  var availableHeight = undefined; // Local variable hoisted to the top
  availableHeight = availableHeight(); // TypeError (can't call undefined)
})();