JS 中的类Public,Private 和 Protected详解

JS 中的类Public,Private 和 Protected详解

目录

前言

public

private

protected

前言

原文地址:dev.to/bhagatparwi…

即使 ES6 中引入了 class 关键字很好的模拟了类的行为以及使我们可以进行面向对象编程,但 JavaScript 中的类缺失了创建公共、私有和保护成员的能力。

若你之前使用过其他面向对象的编程语言,肯定知道内部和外部接口的重要性。内部接口引用的方法和属性只能在类的内部获取。相反,外部接口的方法和属性可以在内外部都可获取。

主要有三个关键字在起作用:public、protected 和 private。

public:类的所有成员都可以被类的实例获取。

private:类成员只能在类中被访问。

protected:类成员在类以及子类中可以被访问

在 JavaScript 中 protected 关键字是最难模拟的。

public

publick 是 JavaScript 中默认的,如果从对象上可以获取的东西,那也可以从它的实例上获取。

const myObject = { name: "Parwinder", sayMyName: function () { return this.name; } } console.log(myObject.name); // Parwinder console.log(myObject.sayMyName()); // Parwinder

上面的例子中,我可以获取属性和方法不会产生任何问题,若你更倾向类语法:

class ObjectCreator { name; constructor(name) { this.name = name; } sayMyName() { return this.name; } } const myObject = new ObjectCreator("Parwinder"); console.log(myObject.name); // Parwinder console.log(myObject.sayMyName()); // Parwinder private

JavaScript 中有很多方法创建私有变量,第一个是闭包:

function carMonitor() { var speed = 0; return { accelerate: function () { return speed++; } } } var car = new carMonitor(); var redCar = new carMonitor() console.log(car.accelerate()); // 0 console.log(car.accelerate()); // 1 console.log(redCar.accelerate()); // 0 console.log(redCar.accelerate()); // 1 console.log(car.accelerate()); // 2 console.log(redCar.accelerate()); // 2 console.log(speed); // speed is not defined

car 和 redCar 各自维护它们自己的 speed 变量并且外部无法获取它。在构造函数或类中,我们强制用户通过方法来获取属性而不是直接读写。这也就是如何封装代码。

第二个方法就是使用 # 符号。

class ObjectCreator { #meaningOfLife; constructor(name) { this.#meaningOfLife = 42; } returnMeaningOfLife() { return this.#meaningOfLife; } #returnAMessage() { return "You will do great things in life"; } } const myObject = new ObjectCreator("Parwinder"); console.log(myObject.returnMeaningOfLife()); // 42 console.log(myObject["#meaningOfLife"]); // undefined console.log(myObject.#meaningOfLife); // SyntaxError console.log(myObject.#returnAMessage); // SyntaxError

从语言层面强制封装了代码,外部直接获取 # 引用的字段则会报错。public 和 private 字段同时存在不会冲突,在同一个类中既可以有私有的 #meaningOfLife 也可以有公共的 meaningOfLife。

类中使用 # 符号来声明私有成员是在 ES2019/ES10 中引入的。

protected

就像我前面说的在 JavaScript 中 protected 是三个方法中最难实现的。我能想到的途径是通过只存在 getter 而没有 setter 的方法来实现 protected 。

若你有别的方法实现,请分享一下!

class NameGenerator { _name; constructor(name) { this._name = name; } get name() { return this._name; } } let nameGenerator = new NameGenerator("John"); console.log(`My name is ${nameGenerator.name}`); // My name is John nameGenerator.name = "Jane"; // Cannot assign to 'name' because it is a read-only property.

到此这篇关于JS 中的类Public,Private 和 Protected详解的文章就介绍到这了,更多相关JS Public,Private ,Protected内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    js设置div的边框|怎样给div设置边框

    js设置div的边框|怎样给div设置边框,,1. 怎样给div设置边框1、首先新建一个html文件,输入基本的内容,这里设置一个div,并把它的class设置为de

    js设置样式|js设置样式类

    js设置样式|js设置样式类,,js设置样式    javascript改变CSS样式分为局部和全局,分别如下:  一、局部改变样式    有三种方法:直接

    js用代码实现简单购物车

    js用代码实现简单购物车,,图: 选择所有按钮: 复制代码代码如下所示: 选择 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3

    js设置背景色|js设置颜色

    js设置背景色|js设置颜色,,js设置背景色首先通过js定位到div的子元素,再通过setatteibute方法给属性添加背景色。js设置颜色js改变字体的颜

    Safari调试iOS中的js

    Safari调试iOS中的js,页面,设备,概述对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试Jav

    Bootstrap的js插件之模态框|modal

    Bootstrap的js插件之模态框|modal,模态,饭盒,.modal——指明div元素包裹模态框;.fade——给模态框添加淡入淡出效果;.modal-dialog——包裹

    js默认事件汇总

    js默认事件汇总,事件,表单,默认事件   就是浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。比如在a标签href属性上的跳转,右键

    js获取元素宽度

    js获取元素宽度,内联,样式,js获取元素宽度1、使用内联样式,即直接把CSS写在HTML元素的style属性中<div > </div>复制代码通过以下js代码

    SQLite使用JSON扩展

    SQLite使用JSON扩展,插件,加载,一、介绍 SQLite3.9.0之后的版本,添加了JSON扩展。在表中可以保存JSON类型。实际上SQLite将JSON类型的

    jscript.dll是什么

    jscript.dll是什么,系统,文件,论坛,显示,扫描,修复,  jscript.dll是Microsoft JavaScript脚本支持相关文件。属于: Microsoft JScript系统 DLL

    postgresql中对jsonb的查询及转换

    postgresql中对jsonb的查询及转换,数据,字段,表数据:需要将strata排除,并且过滤info字段中为{}的数据,将jsonb转换成text,替换“,{,}见SQL:sele