迹忆客 专注技术分享

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

在 JavaScript 中创建私有属性

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

本文将解释 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"
    })();
})();

输出:

使用 closure() 创建私有属性

这意味着将变量分配给最顶层的自调用函数调用,并且仅通过函数返回公开其内部函数的一部分。

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();

输出:

从私有属性示例访问公共属性

单击此尝试一下以访问此代码的执行。

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

本文地址:

相关文章

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 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

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

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便