迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

JavaScript 中的全局和私有函数

作者:迹忆客 最近更新:2024/03/18 浏览次数:

可以全局调用的函数称为全局函数,而我们不能直接在类/模块之外调用私有函数。

在本文中,我们将使用三个文件: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 文件中编写函数,它将被限制为全局的 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 的值。你可以在此处找到更多详细信息。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 JavaScript 中隐藏表格行

发布时间:2024/03/18 浏览次数:184 分类:JavaScript

JavaScript 不一定有任何可以直接隐藏表格内容的预定义函数。更准确地说,有 jQuery 的 toggle() 函数和 hide()、show() 函数,它们依次执行以按下行并展开它们。

JavaScript 查找表

发布时间:2024/03/18 浏览次数:112 分类:JavaScript

在今天的帖子中,我们将学习使用 JavaScript 中的一种简单方式创建查找表。

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 更改按钮文本。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便