在 ES8 中使用 Object.defineProperties() 方法创建 getter/setter

在 ES8 中使用 Object.defineProperties() 方法创建 getter/setter

在 JavaScript 开发中，对象的属性设置是非常重要的，同时也需要对属性的访问控制有较高的需求。ES5 支持了 Object.defineProperty() 方法，使用它可以创建 getter 和 setter，但它只允许为对象的单个属性设置 getter 和 setter。

在 ES8 中，我们可以通过 Object.defineProperties() 方法同时设置多个属性的 getter 和 setter。

定义 getter 和 setter

getter 和 setter 的定义都分别使用 get 和 set 关键字：

// javascriptcn.com 代码示例
const obj = {
  _name: '',
  get name () {
    return this._name.toUpperCase()
  },
  set name (value) {
    this._name = value.trim()
  }
}

这段代码中，name 属性有对应的 getter 和 setter。当读取 name 属性时，会返回 _name 属性的大写版本；当写入 name 属性时，会将属性值先去掉首尾的空白字符，再赋值给 _name 属性。

使用 defineProperties() 方法

在 ES8 中使用 Object.defineProperties() 方法可以同时定义多个属性：

// javascriptcn.com 代码示例
const obj = {}
Object.defineProperties(obj, {
  _name: {
    value: '',
    writable: true
  },
  name: {
    get: function() {
      return this._name.toUpperCase()
    },
    set: function(value) {
      this._name = value.trim()
    }
  }
})

这段代码中，我们给 obj 对象定义了两个属性，_name 和 name，其中 _name 属性的 value 为 ''，writable 为 true，表示这个属性的值可以被改变。name 属性具有 getter 和 setter，分别对应上面的代码定义。

示例代码

我们可以通过以下代码验证这个结论：

// javascriptcn.com 代码示例
const obj = {}
Object.defineProperties(obj, {
  _name: {
    value: '',
    writable: true
  },
  name: {
    get: function() {
      return this._name.toUpperCase()
    },
    set: function(value) {
      this._name = value.trim()
    }
  }
})
obj.name = ' hello world '
console.log(obj.name) // 输出 HELLO WORLD

这段代码中，我们创建了一个空对象 obj，然后通过 defineProperties() 方法定义了 _name 和 name 两个属性。最后，我们将 ' hello world ' 赋值给 obj 的 name 属性，并在控制台输出了 obj.name 的结果。

总结

Object.defineProperties() 方法可以在 ES8 中同时为多个对象属性定义 getter 和 setter，为我们在写 JavaScript 代码时提供了更多的灵活性和可读性。在实际项目中，我们可以根据具体的场景来灵活使用 getter 和 setter，达到更好的编程效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654ada5d7d4982a6eb4d8074