如何在JavaScript中通过引用传递变量以修改其值？

JavaScript中，基本类型（字符串、数字、布尔等）采用值传递，函数内部拿到的是变量的副本，修改副本不会影响外部变量；引用类型（对象、数组）采用引用传递，修改对象属性会同步到外部。针对你的需求，以下是几种比对象包裹、eval更优的方案：

基础场景解决方案 #

方案1：用getter/setter函数封装变量 #

把变量的读写逻辑封装成函数，函数内部可直接修改外部变量：

let myvar = 1;

function getMyvar() {
  return myvar;
}

function setMyvar(newVal) {
  myvar = newVal;
}

function test(newVal) {
  setMyvar(newVal);
}

test(2);
console.log(getMyvar()); // 输出2

方案2：极简包装器（低侵入性） #

如果不想改造所有变量为复杂对象，可使用仅含单个属性的极简包装，代码侵入性极低：

function test(wrapper) {
  wrapper.value = 2;
}

let myvar = { value: 1 };
test(myvar);
console.log(myvar.value); // 输出2

输入框同步需求的优化方案 #

针对你更新的输入框自动同步变量场景，推荐以下两种实用方法：

方法A：传递变量更新函数 #

将修改外部变量的逻辑封装成函数传入，回调中直接调用即可更新变量，无需每个字段手动赋值：

function test5(initialValue, updateFn, onblur) {
  const id = `ctl_${Date.now()}`; // 用时间戳避免ID重复
  document.querySelector('body').innerHTML += `<input id="${id}" type="text" value="${initialValue}">`;
  const el = document.getElementById(id);
  
  el.addEventListener('blur', function(e) {
    const newValue = e.target.value;
    updateFn(newValue); // 调用更新函数修改外部变量
    onblur?.(e);
  });
  return el;
}

let myvar5 = 'test';
const ele = test5(
  myvar5,
  (newVal) => { myvar5 = newVal; }, // 传递更新变量的函数
  function(e) {
    console.log(myvar5); // 输出输入框的最新值
  }
);

方法B：Proxy响应式变量（进阶） #

用Proxy创建响应式变量，实现变量与输入框的双向自动同步，无需手动处理更新逻辑：

function createReactiveVar(initialValue) {
  let value = initialValue;
  const subscribers = [];

  const proxy = new Proxy({}, {
    get(target, prop) {
      return prop === 'value' ? value : target[prop];
    },
    set(target, prop, newValue) {
      if (prop === 'value') {
        value = newValue;
        subscribers.forEach(fn => fn(value));
      }
      return true;
    }
  });

  proxy.subscribe = (fn) => {
    subscribers.push(fn);
    return () => subscribers.splice(subscribers.indexOf(fn), 1);
  };

  return proxy;
}

// 使用示例
const myvar5 = createReactiveVar('test');

function test5(reactiveVar, onblur) {
  const id = `ctl_${Date.now()}`;
  document.querySelector('body').innerHTML += `<input id="${id}" type="text" value="${reactiveVar.value}">`;
  const el = document.getElementById(id);

  // 输入框失焦时更新变量
  el.addEventListener('blur', function(e) {
    reactiveVar.value = e.target.value;
    onblur?.(e);
  });

  // 变量变化时自动更新输入框
  reactiveVar.subscribe((newVal) => {
    el.value = newVal;
  });

  return el;
}

const ele = test5(
  myvar5,
  function(e) {
    console.log(myvar5.value); // 自动同步最新值
  }
);

// 手动修改变量也会同步到输入框
// myvar5.value = 'new test';

避坑提示 #

eval存在安全风险（可执行任意代码）、性能差且可读性低，极易引发作用域问题，绝对不推荐使用。

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