在 JavaScript 中创建私有属性
本文将解释 ES6 类、使用 ES6 类的私有属性,以及如何在 JavaScript 中创建和声明这些私有属性。此外,讨论和解释了在 JavaScript 中实现 private
关键字的不同方法。
面向对象是一种基于现实世界建模的编程范式。它将程序视为通过方法进行通信的对象的集合。
ES6 也支持这些面向对象的组件。
在 ES6 中,class
关键字可用于构建类。声明类或利用类表达式可用于将它们包含在代码中。
语法:
class Class_name {
}
//declaring a class
var var_name = new Class_name {
}
//class expression
关键字 this
在 JavaScript 中声明公共属性和方法。它们可以在指定函数的内部和外部访问。
在面向对象的语言中,private
关键字是一个访问修饰符,它限制对指定类中的属性和方法的访问。这使得隐藏应该被窥探而不是在教室外参与的潜在逻辑变得简单。
但是,使用 JavaScript,你怎么能达到同样的效果呢?private
不是保留关键字;相反,它只能用作变量。
语法:
const private = 'private';
private.js
//private is not a reserved keyword, and you can set it to anything.
幸运的是,有一些解决方案可以在 JavaScript 中实现私有属性和函数。实现私有属性的方法如下:
使用 closure()
是在 JavaScript 中实现私有属性的选择之一。可以访问周围函数变量的内部函数称为闭包。
例子:
(function one() {
var a = 'Hello World';
// The scope of the outer function is accessible to this inner function.
(function two() {
console.log(a); // This will give output of "Hello World"
})();
})();
输出:
这意味着将变量分配给最顶层的自调用函数调用,并且仅通过函数返回公开其内部函数的一部分。
ES6 类本身不支持私有属性。但是,你可以通过将新属性放在类函数 Object() { [native code] }
中来获得类似的效果。我们可以利用 getter 和 setter 来访问隐藏的属性,而不是将它们附加到对象上。
值得注意的是,该类的每个新实例都重新定义了 getter 和 setter。你可以利用 ES6 中引入的 class
关键字来使你的代码更类似于 OOP 方法。
在你的类之外声明属性和方法以使它们成为私有的。
例子:
class Person {
constructor(name) {
var _name = name
this.setName = function(name) { _name = name; }
this.getName = function() { return _name; }
}
}
以后也许可以使用官方的方式使用私有字段。目前,这是在撰写本文时的第 3 阶段提案。
有了今天最新版本的 Babel,你已经可以使用它了。要定义私有属性或方法,请在它们前面加上一个哈希。
例子:
class Something {
#property;
constructor(){
this.#property = "test";
}
#privateMethod() {
return 'hello world';
}
getPrivateMessage() {
return this.#property;
}
}
const instance = new Something();
console.log(instance.property); // It will show "undefined"
console.log(instance.privateMethod); // This will show "undefined"
console.log(instance.getPrivateMessage()); // This will show "test"
你可以点击这个链接来观看上面代码段的执行。
你必须明白,这是一个 MODULE,而不是一个需要实例化的类。要从私有属性访问公共属性,请使用 self.
在公共方法/变量中,在私有方法中没有任何内容,它都会起作用。
例子:
var PersonModule = (function(){
var self = {};
var privateChangeNameToBob = function(){
self.name = "World";
};
self.sayHello = function(){
console.log("Hello " + self.name);
};
self.changeName = function(){
privateChangeNameToBob();
};
self.name = "";
return self;
})();
PersonModule.name = 'Test';
PersonModule.changeName();
PersonModule.sayHello();
输出:
单击此尝试一下以访问此代码的执行。
相关文章
在 Angular 中上传文件
发布时间:2023/04/14 浏览次数:71 分类:Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间:2023/04/14 浏览次数:91 分类:Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间:2023/04/14 浏览次数:139 分类:Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间:2023/04/14 浏览次数:142 分类:Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间:2023/04/14 浏览次数:150 分类:Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间:2023/04/14 浏览次数:107 分类:Angular
-
我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间:2023/04/14 浏览次数:104 分类:Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。