如何在同一函数中传入不同对象且无需修改内部字面量表达式？

你的需求是点击不同按钮传入object1/object2执行person函数，但两个对象的姓名属性大小写不一致（一个是Name，一个是name），且不能改动person函数里的${name}、${age}写法。下面是具体实现方案：

1. 先做属性适配 #

因为两个对象的姓名属性命名不统一，先写个小函数把它们转换成函数能识别的格式：

// 适配对象属性，统一name字段的大小写
function adaptPerson(obj) {
  return {
    name: obj.name ?? obj.Name, // 优先取小写name，没有则用大写Name
    age: obj.age
  };
}

2. 绑定按钮事件执行函数 #

这里提供两种可行的方式，按需选择：

方式一：用with语句快速实现 #

通过with把适配后的对象作为临时作用域，让person函数里的变量直接读取对象属性：

// 给按钮1绑定点击事件，传入object1
document.querySelector('#btn1').addEventListener('click', () => {
  const adaptedObj = adaptPerson(object1);
  with(adaptedObj) {
    person();
  }
});

// 给按钮2绑定点击事件，传入object2
document.querySelector('#btn2').addEventListener('click', () => {
  const adaptedObj = adaptPerson(object2);
  with(adaptedObj) {
    person();
  }
});

注意：如果你的代码开启了ES5严格模式，with语句会被禁用，这种情况下建议用下面的方式。

方式二：临时挂载全局变量（无模式限制） #

把适配后的属性临时放到全局作用域，执行完函数再恢复原全局变量，避免污染：

// 封装通用执行逻辑
function runPerson(obj) {
  const adaptedObj = adaptPerson(obj);
  // 保存原全局变量的值
  const oldName = window.name;
  const oldAge = window.age;
  // 替换成当前对象的属性
  window.name = adaptedObj.name;
  window.age = adaptedObj.age;
  // 执行目标函数
  person();
  // 恢复全局变量
  window.name = oldName;
  window.age = oldAge;
}

// 绑定按钮事件
document.querySelector('#btn1').addEventListener('click', () => runPerson(object1));
document.querySelector('#btn2').addEventListener('click', () => runPerson(object2));

内容的提问来源于stack exchange，提问作者Muralikumar J