在另一个 JS 文件中调用同名函数答案

【问题标题】：Calling a function with same name in another JS file在另一个 JS 文件中调用同名函数
【发布时间】：2013-01-23 19:20:20
【问题描述】：

我只是有点困惑...如果我有一个具有如下功能的.js 文件：

function myMain() {
    var count=0;
    count++;               
    myHelper(count);
    alert(count);
}

function myHelper(count) {
    alert(count);
    count++;
}

我还能在另一个 .js 文件上调用另一个方法 myHelper() 吗？或者有没有其他方法可以将计数变量从一个函数传递到另一个函数，然后它将被调用到其他 .js 文件。你对这个有什么想法吗？谢谢！

【问题讨论】：

使用命名空间的好习惯，尤其是当您有两个同名的全局方法时

标签： javascript function variables count

【解决方案1】：

更新：现在你应该更喜欢在 <script> 标签中使用 ES6 import/export 和 type="module" 或通过像 webpack 这样的模块捆绑器。

当两个脚本文件包含在同一个页面中时，它们在同一个全局 JavaScript 上下文中运行，因此两个名称将相互覆盖。所以不，你不能在不同的 .js 文件中拥有两个同名的函数，并在编写时访问它们。

最简单的解决方案是重命名其中一个函数。

更好的解决方案是让您使用命名空间模块化编写 JavaScript，以便每个脚本文件将尽可能少的（最好是 1 个）对象添加到全局范围，以避免单独脚本之间的命名冲突。

在 JavaScript 中有多种方法可以做到这一点。最简单的方法是在每个文件中定义一个对象：

// In your first script file
var ModuleName = {
    myMain: function () {
        var count=0;
        count++;               
        myHelper(count);
        alert(count);
    },

    myHelper: function (count) {
        alert(count);
        count++;
    }
}

在后面的脚本文件中，调用函数 ModuleName.myMain();

一种更流行的方法是使用自评估函数，类似于以下：

(function (window, undefined) {

    // Your code, defining various functions, etc.
    function myMain() { ... }
    function myHelper(count) { ... }

    // More code...

    // List functions you want other scripts to access
    window.ModuleName = {
        myHelper: myHelper,
        myMain: myMain  
    };
})(window)

【讨论】：

不知道这是否有助于提出问题，但肯定解决了我的旧问题。而不是调用 document.ready 函数并尝试将其放入各种文件中。我直接用命名空间替换它，并在加载所有文件后调用它们。
第一个例子只在函数声明用逗号分隔时对我有用

【解决方案2】：

如果您知道您将要覆盖一个方法，您可以先将旧方法存储在一个变量中，然后通过该变量调用该函数的另一个实现。

【讨论】：

【解决方案3】：

是的，只要将两个 js 文件都包含在一个 html 或 jsp 页面中，您就可以从任何其他 js 文件调用 myHelper()

你可能想看看这个： Can we call the function written in one JavaScript in another JS file?

【讨论】：