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 的值。你可以在此处找到更多详细信息。
相关文章
在 JavaScript 中隐藏表格行
发布时间：2024/03/18 浏览次数：184 分类：JavaScript
-
JavaScript 不一定有任何可以直接隐藏表格内容的预定义函数。更准确地说，有 jQuery 的 toggle() 函数和 hide()、show() 函数，它们依次执行以按下行并展开它们。
JavaScript 表格滚动
发布时间：2024/03/18 浏览次数：139 分类：JavaScript
-
要在网页中滚动表格内容，我们可以依赖一些 JavaScript 属性来依次执行任务。overflow、overflowX 和 overflowY 的使用使表格可滚动且可访问。
用 JavaScript 检查按钮是否被点击
发布时间：2024/03/18 浏览次数：147 分类：JavaScript
-
使用 JavaScript 检查按钮是否被点击可以通过三种方法进行。在 HTML 中添加 onclick 属性，将脚本标签中的 onclick 初始化为方法，使用 EventListener 可能是更好的方法。
JavaScript 更改按钮文本
发布时间：2024/03/18 浏览次数：128 分类：JavaScript
-
本教程展示了如何使用 JavaScript 更改按钮文本，并演示了使用 jQuery 更改按钮文本。
