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
的值。你可以在此处找到更多详细信息。