JavaScript 中的名稱空間

預設情況下，JavaScript 中沒有名稱空間，但我們可以定製一個。

本文將通過不同的示例討論如何在我們的 JavaScript 程式碼中宣告和執行名稱空間。

JavaScript 中的名稱空間

在程式設計中，由於範圍問題，當我們需要多次使用同一個識別符號時，我們通常會遇到命名衝突問題。在不同條件下，我們的程式碼可能需要相同的變數或函式。

我們在程式碼中實現名稱空間來解決和避免識別符號之間的命名衝突問題。它將允許我們在不同的名稱空間中使用相同的命名變數。

JavaScript 中的名稱空間型別

我們可以將 JavaScript 的名稱空間分成兩部分，如下所述：

1. 靜態名稱空間
2. 動態名稱空間

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 即可檢視日誌報告。