JavaScript 中的全域性和私有函式

Mehvish Ashiq 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中實現全域性和私有函式
  2. 在 JavaScript 類中實現 GlobalPrivate 函式
JavaScript 中的全域性和私有函式

可以全域性呼叫的函式稱為全域性函式,而我們不能直接在類/模組之外呼叫私有函式。

在本文中,我們將使用三個檔案:index.htmlfileOne.jsfileTwo.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 中實現全域性和私有函式

如果我們直接在 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 類中實現 GlobalPrivate 函式

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

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Function