JavaScript 动态属性访问器

在 JavaScript 中，属性访问器为开发者提供了一个便捷的访问和修改对象属性的方法。通常情况下，我们可以使用点号或方括号来访问和设置对象属性：

const obj = {foo: 'bar'};

console.log(obj.foo); // 'bar'
console.log(obj['foo']); // 'bar'

obj.baz = 'qux';
console.log(obj.baz); // 'qux'
console.log(obj['baz']); // 'qux'

不过有时候，我们可能需要动态地访问或设置对象属性。比如，我们希望根据用户输入的键名来获取相应的属性值。JavaScript 此时提供了一些方法来实现动态属性访问。

方括号访问器

方括号访问器是一种使用字符串变量来访问和修改对象属性的方法：

const obj = {foo: 'bar'};

const key = 'foo';
console.log(obj[key]); // 'bar'

const newKey = 'baz';
obj[newKey] = 'qux';
console.log(obj[newKey]); // 'qux'

在上面的例子中，我们首先定义了字符串变量 key，然后使用该变量来访问 obj 对象的属性。接着，我们定义了另一个字符串变量 newKey，并使用它来为 obj 添加了一个新的属性 baz。

需要注意的是，方括号访问器不仅可以用于字符串变量，还可以使用任何可以转换为字符串的值，比如数字、布尔值等：

const obj = {0: 'zero', 1: 'one'};

console.log(obj[0]); // 'zero'
console.log(obj[1]); // 'one'

Object.defineProperty

除了方括号访问器，JavaScript 还提供了一些其他的方法来动态地访问或设置对象属性。其中一个是 Object.defineProperty 方法，它可以让我们对对象的属性进行更加精细的控制，比如定义属性的可枚举性、可写性、可配置性等：

const obj = {};

Object.defineProperty(obj, 'foo', {
  value: 'bar',
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(obj.foo); // 'bar'

在上面的例子中，我们使用 Object.defineProperty 方法来为对象 obj 定义了一个属性 foo。该属性的值为字符串 'bar'，可以被修改，可以被枚举，可以被删除。需要注意的是，如果不显式地指定这些属性，则它们的默认值都是 false。

Proxy

除了 Object.defineProperty 方法，JavaScript 还提供了一个高级的对象处理机制：Proxy。使用 Proxy，我们可以创建一个虚拟对象，来代理原始对象。通过在代理对象上定义 get 和 set 等方法，我们可以高度自定义对象的访问和修改行为：

const obj = {foo: 'bar'};
const handler = {
  get(target, key) {
    console.log('getting', key);
    return target[key];
  },
  set(target, key, value) {
    console.log('setting', key, value);
    target[key] = value;
  }
};
const proxy = new Proxy(obj, handler);

console.log(proxy.foo); // 'bar'
proxy.baz = 'qux'; // 'setting baz qux'
console.log(obj.baz); // 'qux'

在上面的例子中，我们首先创建了一个原始对象 obj，并使用它来创建了一个代理对象 proxy。接着，我们定义了一个 handler 对象，该对象包含了两个方法：get 和 set。在 get 方法中，我们使用 console.log 来输出正在访问的属性名，并返回该属性的值。在 set 方法中，我们同样使用 console.log 来输出正在设置的属性名和属性值，并将其赋给原始对象。

使用 get 和 set 等方法，我们可以轻松地实现自定义的属性访问器。当然，由于 Proxy 是一种比较高级的语言特性，需要注意使用它的兼容性和性能问题。

对于 JavaScript 动态属性访问器，以上就是一些较为常见和实用的方法。使用它们，我们可以更加灵活地访问和设置对象属性。