封装_私有类字段和方法

前言

在 JavaScript 中,封装、私有类字段和方法是面向对象编程的一种重要特性。它们允许你将数据(属性)和对数据的操作(方法)组合在一起,并控制访问权限,从而提高代码的安全性和可维护性。私有字段和私有方法是指仅能在类的内部访问的属性和函数。外部代码无法直接访问或修改这些私有成员,这样就可以防止外部依赖于内部实现细节,提高了模块化和安全性。
本篇文章我们就来学习一下JavaScript中的公有字段,私有字段,公有方法,私有方法,还是以上一节的代码举例

javascript 复制代码
class Account {
  constructor(owner, currency, pin) {
    this.owner = owner;
    this.currency = currency;
    this._pin = pin;
    this._movements = [];
    this.locale = navigator.language;

    console.log(`欢迎来到你的账户,${owner}`);
  }

  //公共接口
  getMovements() {
    return this._movements;
  }

  deposit(val) {
    this._movements.push(val);
  }

  withraw(val) {
    this.deposit(-val);
  }

  _approveLoan(val) {
    return true;
  }

  requestLoan(val) {
    if (this._approveLoan(val)) {
      this.deposit(val);
      console.log('恭喜你!贷款成功');
    }
  }
}

公共字段

● 例如我们将浏览器设置语言和存取款的操作记录设置我公有字段,所有人都可以访问

javascript 复制代码
class Account {
  //公有字段(例子,实际与之前写法作用一样)
  locale = navigator.language;
  _movements = [];

  constructor(owner, currency, pin) {
    this.owner = owner;
    this.currency = currency;
    this._pin = pin;

    console.log(`欢迎来到你的账户,${owner}`);
  }

  //公共接口
  getMovements() {
    return this._movements;
  }

  deposit(val) {
    this._movements.push(val);
  }

  withraw(val) {
    this.deposit(-val);
  }

  _approveLoan(val) {
    return true;
  }

  requestLoan(val) {
    if (this._approveLoan(val)) {
      this.deposit(val);
      console.log('恭喜你!贷款成功');
    }
  }
}

私有字段

● 例如存款取款记录是私有字段,我们不希望可以被直接访问,从 ECMAScript 2022 开始,JavaScript 引入了私有字段的语法,例如 #privateField。

javascript 复制代码
class Account {
  //公有字段(例子,实际与之前写法作用一样)
  locale = navigator.language;

  //私有字段
  #movements = [];
  #pin;

  constructor(owner, currency, pin) {
    //参数中不可以直接为私有字段
    this.owner = owner;
    this.currency = currency;
    this.#pin = pin;

    console.log(`欢迎来到你的账户,${owner}`);
  }

  //公共接口
  getMovements() {
    return this.#movements;
  }

  deposit(val) {
    this.#movements.push(val);
  }

  withraw(val) {
    this.deposit(-val);
  }

  _approveLoan(val) {
    return true;
  }

  requestLoan(val) {
    if (this._approveLoan(val)) {
      this.deposit(val);
      console.log('恭喜你!贷款成功');
    }
  }
}

● 这样我们无法直接查看这个字段,当然使用getMovements同样可以访问,因为她还是一个公有的API

javascript 复制代码
console.log(ITshare.#movements);

公共方法

这个就不在赘述在了,在上述的构造器中,所有的方法都是公共方法

私有方法

私有方法和私有字段的表现方式一样

javascript 复制代码
class Account {
  //公有字段(例子,实际与之前写法作用一样)
  locale = navigator.language;

  //私有字段
  #movements = [];
  #pin;

  constructor(owner, currency, pin) {
    //参数中不可以直接为私有字段
    this.owner = owner;
    this.currency = currency;
    this.#pin = pin;

    console.log(`欢迎来到你的账户,${owner}`);
  }

  //公共接口
  getMovements() {
    return this.#movements;
  }

  deposit(val) {
    this.#movements.push(val);
  }

  withraw(val) {
    this.deposit(-val);
  }

  requestLoan(val) {
    if (this.#approveLoan(val)) {
      this.deposit(val);
      console.log('恭喜你!贷款成功');
    }
  }

  //私有方法
  #approveLoan(val) {
    return true;
  }
}
相关推荐
军军君011 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
xiaoqi9222 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
qq_177767372 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
2603_949462102 小时前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter
wuhen_n2 小时前
JavaScript内存管理与执行上下文
前端·javascript
Hi_kenyon3 小时前
理解vue中的ref
前端·javascript·vue.js
jin1233224 小时前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos
2501_920931704 小时前
React Native鸿蒙跨平台医疗健康类的血压记录,包括收缩压、舒张压、心率、日期、时间、备注和状态
javascript·react native·react.js·ecmascript·harmonyos
橙露5 小时前
React Hooks 深度解析:从基础使用到自定义 Hooks 的封装技巧
javascript·react.js·ecmascript
2501_920931705 小时前
React Native鸿蒙跨平台使用useState管理健康记录和过滤状态,支持多种健康数据类型(血压、体重等)并实现按类型过滤功能
javascript·react native·react.js·ecmascript·harmonyos