封装_私有类字段和方法

前言

在 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;
  }
}
相关推荐
kyriewen1 小时前
写组件文档写到吐?我用AI自动生成Storybook,同事以后直接抄
前端·javascript·面试
五点六六六2 小时前
你敢信这是非Native页面写出来的渐变效果吗🌝(底层原理解析
前端·javascript·面试
吃西瓜的年年3 小时前
TypeScript
javascript·ubuntu·typescript
熊猫_豆豆6 小时前
一个模拟四轴飞行器在随机气流扰动下悬停飞行的交互式3D仿真网页,包含飞行器建模与PID控制算法
javascript·3d·html·四轴无人机模拟飞行
来恩10037 小时前
jQuery选择器
前端·javascript·jquery
前端繁华如梦7 小时前
树上挂苹果还是挂玻璃球?Three.js 程序化果实的完整实现指南
前端·javascript
CDwenhuohuo7 小时前
优惠券组件直接用 uview plus
前端·javascript·vue.js
川冰ICE8 小时前
TypeScript装饰器与元编程实战
前端·javascript·typescript
AI砖家8 小时前
Vue3组件传参大全,各种传参方式的对比
前端·javascript·vue.js
希望永不加班8 小时前
var局部变量类型推断的利弊
java·服务器·前端·javascript·html