JavaScript中能否使用Accessor Function为对象定义属性？

实现方案 #

分两种场景提供可直接运行的实现：

场景1：valueAccessor 仅为简单属性读取逻辑（仅支持 d.key/d["key"] 写法） #

这种场景可以直接解析访问器函数的序列化内容提取目标属性名，代码如下：

function definePropertyUsingFunction(target, accessor, newValue) {
  const fnString = accessor.toString();
  // 同时匹配点属性访问和方括号属性访问两种写法
  const keyResult = fnString.match(/(?:\w+\[["'](\w+)["']\]|\w+\.(\w+))/);
  if (!keyResult) throw new Error('无法解析访问器对应的目标属性');
  const targetKey = keyResult[1] ?? keyResult[2];
  target[targetKey] = newValue;
  return target;
}

测试调用：

const valueAccessor = d => d["year"];
const output = {};
definePropertyUsingFunction(output, valueAccessor, 2024);
console.log(output.year); // 输出 2024

场景2：valueAccessor 包含复杂计算/分支逻辑 #

这种场景无法通过解析函数字符串拿到属性名，需要在定义访问器的时候额外挂载目标属性的元数据：

// 封装访问器创建方法，自动挂载元信息
const createValueAccessor = (key) => {
  const accessor = d => d[key];
  // 把目标属性绑定到访问器上
  accessor.key = key;
  // 这里也可以扩展更复杂的访问逻辑，不影响后续赋值
  return accessor;
}

// 定义访问器
const valueAccessor = createValueAccessor('year');

function definePropertyUsingFunction(target, accessor, newValue) {
  if (!accessor.key) throw new Error('访问器未绑定目标属性，无法完成赋值');
  target[accessor.key] = newValue;
  return target;
}

调用效果和场景1完全一致，适配性更强，优先推荐该方案。

内容的提问来源于stack exchange，提问作者Oren Bahari