文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JS 中的类Public,Private 和 Protected详解

2024-04-02 19:55

关注

前言

原文地址:dev.to/bhagatparwi…

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

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

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

在 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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯