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 的值。你可以在此处找到更多详细信息。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
