【JS】访问器成员

田本初2024-10-02 10:52

前言

如下例，有一商品对象，其中属性分别为单价和数量以及一个用于计算总价的方法，需要通过 product.getTotal() 获得总价，也可以使用访问器成员getter控制属性读写逻辑，通过 product.total 的方式获取总价，提高可读性。

javascript 复制代码

const product = {
  name: "iphone",
  price: 13999,
  count: 3,
  getTotal: function () {
    return this.price * this.count
  },
}

ES5

javascript 复制代码

function Product(name, price, count) {
  this.name = name
  this.price = price
  this.count = count
}
Object.defineProperty(Product.prototype, "total", {
  get: function () {
    return this.price * this.count
  },
})

ES6

javascript 复制代码

class Product {
  constructor(name, price, count) {
    this.name = name
    this.price = price
    this.count = count
  }
  get total() {
    return this.price * this.count
  }
}

Object

javascript 复制代码

const p = {
  name: "iphone",
  price: 13999,
  count: 3,
  get total() {
    return this.price * this.count
  },
}