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
的值。你可以在此處找到更多詳細資訊。