javascript - jQuery/JavaScript 函数作用域/提升

Question

我有两个包含 JavaScript 和 jQuery 函数的文件。它们在页面上按以下顺序引用:

<script src="js/kiosk-functions.js"></script>
<script src="js/kiosk-main-socket-handler.js"></script>

在 kiosk-functions.js 中，我最初是这样做的 -

$(function() {
    // some JavaScript functions
    function isJSON(str) {
        try {
            JSON.parse(str);
            return true;
        } catch (e) {
            return false;
        }
     }
     // some jQuery code follows...
});

然后，在 kiosk-main.js 中我有这个 -

$(function() {
    var socket = io();
    socket.on('message', function (data) {

        if(isJSON(data)) {
            // do stuff
        }
    });
    // other JavaScript and jQuery code
});

这导致了以下错误 -

Uncaught ReferenceError: isJSON is not defined

一旦我将 isJSON() 函数从 kiosk-functions.js 中的文档就绪处理程序中移出，那么一切都很好，但让我感到困惑。我在这里阅读了一些关于 SO 的答案，试图了解发生了什么，给人的印象是该功能将被提升并在全局范围内可用。我没有找到任何可以证明此示例的内容。

我确信我在这里遗漏了一些简单的东西。文档就绪处理程序(一个函数)是否会阻止 isJSON() 函数被提升？或者这是一个简单的范围问题？

Answer 1

你的问题不是提升，而是功能的范围。

基本上，在 kiosk-functions.js 中，您定义一个回调到 document.ready 并在该回调中定义函数 isJSON() .该功能仅在该范围内已知。

在第二个文件 kiosk-main.js 中，您尝试使用 isJSON() 就好像它是在该回调的范围内或在全局范围内定义的一样。两者都不是这种情况，因此会出现错误。

为了解决这个问题，您可以添加一些全局命名空间 myNamespace 并将您的函数附加到那里:

$(function() {
    // some JavaScript functions
    function isJSON(str) {
        try {
            JSON.parse(str);
            return true;
        } catch (e) {
            return false;
        }
     }

  // init namespace
  window.myNamespace = window.myNamespace || {};

  // attach function
  window.myNamespace.isJSON = isJSON;
});

然后在另一个文件中您可以引用该全局命名空间来调用您的函数:

$(function() {
    var socket = io();
    socket.on('message', function (data) {

        if(myNamespace.isJSON(data)) {
            // do stuff
        }
    });
    // other JavaScript and jQuery code
});

---

编辑

正如@Alnitak 在评论中提到的:在浏览器中，全局对象是window。相应地更改了代码。