函数在同一个文件中定义但在另一个文件中未定义[重复]

Question

在 file_b.js 我有函数

function date_of_birth(target, selector, days) { // Do something }

在 file_a.js 中，我尝试使用 date_of_birth('a', 'b', 30) 调用该函数，但出现错误：date_of_birth is not defined

所以我试了一下：

window.date_of_birth = function date_of_birth(target, selector, days) { // Do something }

当我调用window.date_of_birth('a', 'b', 30); 时，我收到错误：window.date_of_birth 不是函数

当我拨打console.log(window.date_of_birth); 时，我得到undefined。

在我使用的两个文件中：

$(document).ready(function() {

});

为什么我的函数没有定义？？

Answer 1

在 2020 年末，您将使用模块来执行此操作，或者依赖于所有现代主流浏览器中存在的本机支持，或者依赖于 Webpack 或 Rollup.js 等使用模块语法获取代码并将其捆绑到旧版本的捆绑器浏览器。

使用模块语法，在简单的情况下，您可以导出您想要提供的功能：

export function date_of_birth(/*...*/) {
    // ...
}

这是一个导出函数声明，它创建了一个命名导出。另一个模块中想要使用该函数的代码将 import 该函数：

import { date_of_birth } from "./module-name.js";

这个话题还有很多，更多 on MDN 或我的书 JavaScript: The New Toys 的第 13 章（如果感兴趣，可以在我的个人资料中链接）。

---

旧答案：

在您的原始代码中，它是未定义的，因为它不是全局的。当你在另一个函数中定义一个函数时，我认为你已经完成了，就像这样：

$(document).ready(function() {
    function date_of_birth(target, selector, days) { // Do something }
});

...该函数仅可在该 ready 回调中访问，而不是全局访问。

当您将其更改为：

$(document).ready(function() {
    window.date_of_birth = function date_of_birth(target, selector, days) { // Do something };
});

这确实使它成为一个全局的，所以错误告诉我们另一个文件的 ready 回调（您正在使用该函数）在 ready 回调之前运行该文件（您在其中定义函数）。

如何解决：

1. 为您的应用选择一个唯一标识符，例如 MyApp。 （它不必是全局唯一的，它只需要 A）不是在浏览器环境中定义的东西，B）不是将来某个时候可能在浏览器环境中定义的东西，并且 C）不是由您使用的任何库定义。）例如，jQuery 使用jQuery。

2. 在您定义此函数的文件中，执行以下操作：

    var MyApp = MyApp || {};
    MyApp.date_of_birth = function date_of_birth() { /*...*/ };
   

   或者，如果您有用于类范围数据的共享函数或您想保持私有的东西，您可以使用包装函数：

    var MyApp = MyApp || {};
    (function() {
        function privateWorkerFunction() {
        }
        MyApp.date_of_birth = function date_of_birth() { /*...*/ };
        // ...
    })();
   

3. 在你使用它的文件中，像这样使用它：

    MyApp.date_of_birth(/*...*/);
   

4. 确保定义函数的文件在使用它的文件之前，将两者都放在 HTML 的末尾（就在结束 </body> 标记之前），并去掉 ready 回调（没有必要；如果脚本位于文档的末尾，则一切就绪）。

Answer 2

您需要在 HTML 页面中在 file_a.js 之前指定 file_b.js，如下所示：

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

这样当您从file_a.js 调用date_of_birth('a', 'b', 30) 时，它已经通过file_b.js 呈现。

Answer 3

当你声明函数function date_of_birth(target, selector, days) { // Do something }时，你不需要$(document).ready(function(){ })。

在$(document).ready 函数之外声明date_of_birth 函数，然后尝试。