JavaScript 中的全域性和私有函式
可以全域性呼叫的函式稱為全域性函式，而我們不能直接在類/模組之外呼叫私有函式。
在本文中，我們將使用三個檔案：index.html、fileOne.js 和 fileTwo.js。
index.html 的啟動程式碼如下所示，因為它將在本文中保持不變。
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./fileOne.js"></script>
<script src="./fileTwo.js"></script>
<title>Document</title>
</head>
<body>
<button id="greet" onclick="greetings()">Display Greetings</button>
<p id="displayGreet"></p>
</body>
</html>
在 JavaScript 中實現全域性和私有函式
如果我們直接在 JavaScript 檔案中編寫函式，它將被限制為全域性的 window 物件。這意味著該功能也將是全域性的。
fileOne.js：
function displayName() {
let firstName = 'Mehvish';
let lastName = 'Ashiq';
return firstName + ' ' + lastName;
}
fileTwo.js：
function greetings() {
document.getElementById('displayGreet').innerHTML = 'Hi! ' + displayName();
}
只要我們點選 Display Greetings 按鈕，greetings() 函式就會被呼叫，它直接呼叫 displayName()，它在 fileOne.js 檔案中定義，因為它是一個全域性函式。
它獲取 displayName() 返回的值並更改 id 為 displayGreet 的元素的 innerHTML。
考慮私有函式並將 displayName() 函式設為私有。為此，我們可以建立一個包含此函式的物件，如下所示。
fileOne.js：
myfunctions = {
displayName: function displayName() {
let firstName = 'Mehvish';
let lastName = 'Ashiq';
return firstName + ' ' + lastName;
}
// you can add more functions here
}
現在，問題是如何在 fileTwo.js 中呼叫它，因為 displayName() 現在是一個私有函式？我們可以呼叫它作為 myfunctions.displayName()。
fileTwo.js：
function greetings() {
document.getElementById('displayGreet').innerHTML =
'Hi! ' + myfunctions.displayName();
}
在 JavaScript 類中實現 Global 和 Private 函式
假設我們在 fileOne.js 中有一個名為 oneClass 的類。我們現在如何使 displayName() 成為私有和全域性的？
fileOne.js：
class oneClass {
constructor() {}
displayName = function displayName() {
let firstName = 'Mehvish';
let lastName = 'Ashiq';
return firstName + ' ' + lastName;
}
// you can write more functions
}
fileTwo.js：
function greetings() {
const one = new oneClass();
document.getElementById('displayGreet').innerHTML =
'Hi! ' + one.displayName();
}
在這裡，我們建立類 oneClass 的例項並將其引用儲存在 one 中。
我們可以通過使用 one 例項類物件直接呼叫 displayName()，因為 displayName() 是一個公共函式，也稱為全域性函式。
fileOne.js：
class oneClass {
constructor() {}
#displayName = function displayName() {
let firstName = 'Mehvish';
let lastName = 'Ashiq';
return firstName + ' ' + lastName;
} getDisplayName() {
return this.#displayName();
}
// you can write more functions
}
fileTwo.js：
function greetings() {
const one = new oneClass();
document.getElementById('displayGreet').innerHTML =
'Hi! ' + one.getDisplayName();
}
在這裡，我們使用 # 符號來表示這個特定的函式是私有的，並且我們知道我們不能直接訪問它。
我們將在可以訪問 #displayName 的類中編寫另一個函式 getDisplayName()。
這樣，我們通過 fileTwo.js 中的 getDisplayName() 獲取 #displayName 的值。你可以在此處找到更多詳細資訊。
