js全局函数怎么写

JavaScript 全局函数的写法：
使用 window 对象、使用 globalThis 对象、避免全局污染。其中，使用 window 对象是最常见的方法。

通过在 JavaScript 中创建全局函数，你可以在整个应用程序中随处调用这些函数，而无需显式传递它们。这在处理跨页面功能或共享实用程序函数时特别有用。下面，我们将详细介绍如何在 JavaScript 中编写全局函数，并讨论一些最佳实践和潜在的陷阱。

一、什么是全局函数

全局函数是在整个 JavaScript 程序范围内都可以访问和调用的函数。它们通常挂载在全局对象上，例如 window（在浏览器环境中）或 global（在 Node.js 环境中）。

在浏览器环境中，所有全局变量和函数默认挂载在 window 对象上。以下是一个简单的例子：

function myGlobalFunction() {
    console.log("This is a global function!");
}
// 通过 window 对象调用
window.myGlobalFunction(); // 输出: This is a global function!
// 直接调用
myGlobalFunction(); // 输出: This is a global function!

二、如何创建全局函数

1、使用 `window` 对象

在浏览器环境中，可以直接将函数赋值给 window 对象，从而创建一个全局函数：

window.myGlobalFunction = function() {
    console.log("This is a global function assigned to window object!");
};

这种方法的优点是明确地表明了该函数是全局的，但也有可能造成全局命名空间的污染。

2、使用 `globalThis` 对象

globalThis 是一个新的全局对象，它在任何 JavaScript 环境中都存在，无需考虑具体的运行环境（浏览器或 Node.js）：

globalThis.myGlobalFunction = function() {
    console.log("This is a global function using globalThis!");
};

这种方式更加通用，适合在跨环境的代码中使用。

3、避免全局污染

尽量避免过多地使用全局函数，因为它们会污染全局命名空间，可能导致命名冲突和难以维护的代码。可以通过模块化或命名空间来管理全局函数：

var MyApp = MyApp || {};
MyApp.myGlobalFunction = function() {
    console.log("This is a namespaced global function!");
};

三、实际应用和最佳实践

1、工具函数

工具函数（如格式化日期、处理字符串等）通常是全局函数的常见用途。下面是一个格式化日期的全局函数例子：

window.formatDate = function(date) {
    var options = { year: 'numeric', month: 'long', day: 'numeric' };
    return date.toLocaleDateString(undefined, options);
};
var today = new Date();
console.log(formatDate(today)); // 输出: 例如 "October 12, 2023"

2、跨页面共享功能

如果你有多个页面需要共享某些功能，可以将这些功能定义为全局函数：

window.navigateToPage = function(pageUrl) {
    window.location.href = pageUrl;
};
// 在任何页面中都可以调用
navigateToPage("https://example.com");

3、避免命名冲突

为了避免全局命名空间的污染，可以使用命名空间模式：

var MyApp = MyApp || {};
MyApp.utils = {
    formatDate: function(date) {
        var options = { year: 'numeric', month: 'long', day: 'numeric' };
        return date.toLocaleDateString(undefined, options);
    },
    navigateToPage: function(pageUrl) {
        window.location.href = pageUrl;
    }
};
// 使用命名空间调用函数
var today = new Date();
console.log(MyApp.utils.formatDate(today));
MyApp.utils.navigateToPage("https://example.com");

四、注意事项和潜在问题

1、命名冲突

全局函数容易引起命名冲突，尤其是在大型项目或团队协作中。使用命名空间或模块化可以有效避免这一问题。

2、安全性

全局函数可能会被其他代码意外修改或覆盖，导致不可预期的行为。可以使用立即调用函数表达式（IIFE）来创建私有作用域，从而保护全局函数：

(function() {
    function myGlobalFunction() {
        console.log("This is a protected global function!");
    }
    window.myGlobalFunction = myGlobalFunction;
})();
// 调用函数
myGlobalFunction(); // 输出: This is a protected global function!

3、可维护性

过多的全局函数会导致代码难以维护和调试。尽量将全局函数的使用限制在必要的范围内，并考虑使用模块化方法（如 ES6 模块或 CommonJS）来组织代码。

五、总结

在 JavaScript 中创建全局函数可以提高代码的可复用性和访问性，但同时也带来了命名冲突和安全性等问题。为了在应用程序中合理使用全局函数，建议遵循以下最佳实践：

使用命名空间：通过命名空间来组织全局函数，避免命名冲突。
使用 globalThis：在跨环境的代码中使用 globalThis 对象。
限制全局函数的数量：尽量减少全局函数的数量，避免污染全局命名空间。
保护全局函数：使用 IIFE 或其他方法保护全局函数，防止它们被意外修改。

通过遵循这些最佳实践，你可以在享受全局函数带来便利的同时，避免潜在的问题和陷阱。