（JavaScript）私有的和受保护的属性和方法

最新推荐文章于 2024-02-01 11:30:00 发布

Anita-Sun

最新推荐文章于 2024-02-01 11:30:00 发布

阅读量754

点赞数

分类专栏： Javascript 相关知识点文章标签： js

本文链接：https://blog.csdn.net/AnitaSun/article/details/110795542

版权

Javascript 相关知识点专栏收录该内容

37 篇文章 1 订阅

订阅专栏

受保护的属性和方法

受保护的属性通常以下划线_作为前缀

class CoffeeMachine {
  _waterAmount = 0;

  set waterAmount(value) {
    if (value < 0) throw new Error("Negative water");
    this._waterAmount = value;
  }

  get waterAmount() {
    return this._waterAmount;
  }

  constructor(power) {
    this._power = power;
  }

}

// 创建咖啡机
let coffeeMachine = new CoffeeMachine(100);

// 加水
coffeeMachine.waterAmount = -10; // Error: Negative water

设置只读属性

class CoffeeMachine {
  // ...

  constructor(power) {
    this._power = power;
  }

  get power() {
    return this._power;
  }

}

// 创建咖啡机
let coffeeMachine = new CoffeeMachine(100);

alert(`Power is: ${coffeeMachine.power}W`); // 功率是：100W

coffeeMachine.power = 25; // Error（没有 setter）

Getter/Setter 函数

class CoffeeMachine {
  _waterAmount = 0;

  setWaterAmount(value) {
    if (value < 0) throw new Error("Negative water");
    this._waterAmount = value;
  }

  getWaterAmount() {
    return this._waterAmount;
  }
}

new CoffeeMachine().setWaterAmount(100);

受保护的字段是可以被继承的
如果我们继承 class MegaMachine extends CoffeeMachine，那么什么都无法阻止我们从新的类中的方法访问 this._waterAmount 或 this._power。

私有的属性和方法

私有属性和方法应该以 # 开头。它们只在类的内部可被访问

class CoffeeMachine {
  #waterLimit = 200;

  #checkWater(value) {
    if (value < 0) throw new Error("Negative water");
    if (value > this.#waterLimit) throw new Error("Too much water");
  }

}

let coffeeMachine = new CoffeeMachine();

// 不能从类的外部访问类的私有属性和方法
coffeeMachine.#checkWater(); // Error
coffeeMachine.#waterLimit = 1000; // Error

私有字段和公有字段不会发生冲突。我们可以同时拥有私有的#waterAmount 和公共的 waterAmount 字段。

<!DOCTYPE html>
<script>
"use strict";globalThis.__codeBoxId = "1ewehyfllh";

class CoffeeMachine {

  #waterAmount = 0;

  get waterAmount() {
    return this.#waterAmount;
  }

  set waterAmount(value) {
    if (value < 0) throw new Error("Negative water");
    this.#waterAmount = value;
  }
}

let machine = new CoffeeMachine();

machine.waterAmount = 100;
alert(machine.waterAmount);  // 100
alert(machine.#waterAmount); // Error
</script>

但是如果我们继承自 CoffeeMachine，那么我们将无法直接访问 #waterAmount。我们需要依靠 waterAmount getter/setter

class MegaCoffeeMachine extends CoffeeMachine {
  method() {
    alert( this.#waterAmount ); // Error: can only access from CoffeeMachine
  }
}

私有字段不能通过 this[name] 访问

Anita-Sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（JavaScript）私有的和受保护的属性和方法

受保护的属性和方法受保护的属性通常以下划线_作为前缀class CoffeeMachine { _waterAmount = 0; set waterAmount(value) { if (value < 0) throw new Error("Negative water"); this._waterAmount = value; } get waterAmount() { return this._waterAmount; } cons
复制链接

扫一扫

专栏目录