JavaScript 中的全局和私有函数

Mehvish Ashiq 2023年10月12日
  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
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