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