迹忆客 专注技术分享

默认情况下，JavaScript 中没有命名空间，但我们可以定制一个。

本文将通过不同的示例讨论如何在我们的 JavaScript 代码中声明和执行命名空间。

JavaScript 中的命名空间

在编程中，由于范围问题，当我们需要多次使用同一个标识符时，我们通常会遇到命名冲突问题。在不同条件下，我们的代码可能需要相同的变量或函数。

我们在代码中实现命名空间来解决和避免标识符之间的命名冲突问题。它将允许我们在不同的命名空间中使用相同的命名变量。

JavaScript 中的命名空间类型

我们可以将 JavaScript 的命名空间分成两部分，如下所述：

JavaScript 中的静态命名空间类型

在静态命名空间中，我们通常使用硬编码的命名空间标签。它可以使用指定的相同旧对象的引用将一个命名空间重新分配给另一个命名空间。

JavaScript 中的动态命名空间类型

在函数包装器中指定了动态命名空间，而不是硬编码标签。我们不需要捆绑返回值以分配给命名空间。

让我们创建一个需要命名空间以获得更清晰的场景。假设我们需要使用多个具有相同名称的函数。

<script>
const sayHello = () => {
  console.log("cat says hello");
};
const sayHello = () => {
  console.log("dog says hello");
};

sayHello();  //it will generate SyntaxError: Identifier 'sayHello' has already been declared
</script>

在上面的 JavaScript 源码中，我们已经多次声明了 sayHello() 函数，这些函数可能会执行不同的代码语句。当我们尝试调用 sayHello() 时，会产生语法错误。

为了避免命名冲突问题，我们将使用命名空间来使用这两个函数而不会出现任何错误。

在 JavaScript 中声明命名空间

我们将包含变量和函数的对象全局初始化为该对象的属性。它将帮助我们避免命名冲突，并且不会感染我们的全球环境。

例子：

<script>
const cat = {
    bodyColor: "Black, White, Brown",
    sayHello: function () {
        console.log("cat says hello");
    },
    sayBye: function () {
        console.log("cat says bye");
    },
};
const dog = {
    bodyColor: "Black, White, Brown",
    sayHello: function () {
        console.log("dog says hello");
    },
    sayBye: function () {
        console.log("dog says bye");
    },
};
cat.sayHello();      //cat says hello
dog.sayHello();    //dog says hello
</script>

我们在这个 HTML 页面源代码中定义了 <script> 标记以使用 JavaScript 代码语句。在 <script> 标签中，我们全局初始化了两个独立的对象，cat 和 dog，它们可以包含多个属性。

之后，我们为两个对象创建了相同的名称属性，例如 bodyColor、sayHello()、sayBye()。我们将字符串值分配给 bodyColor 属性，并将不同的函数分配给 sayHello() 和 sayBye() 属性。

函数可以包含我们想要在调用该函数时执行的不同代码语句。在这里，我们放置了 console.log() 语句。

我们在点运算符的帮助下从定义的对象调用函数，它将在浏览器的默认日志报告中打印消息。

你可以使用 .html 扩展名保存给定的 HTML 示例，并在任何浏览器中打开它以检查输出。你需要激活浏览器的调试模式，只需按 F12 即可查看日志报告。