如何实现仅当变量被函数调用时才计算以优化代码性能？

这确实是个非常务实的性能优化需求——当外层变量的计算成本很高时，只给嵌套函数fn()提供它实际用到的变量，能大幅减少不必要的资源消耗。我来分享几种在JavaScript里可行的实现思路：

1. 运行时依赖追踪：用Proxy拦截访问 #

这是最灵活的方案，适合fn()完全动态（比如用户自定义、运行时生成）的场景。核心思路是用ES6的Proxy对象拦截变量的访问操作，记录fn()到底用到了哪些变量，再针对性计算这些变量。

举个具体的实现例子：

function outer(fn) {
  // 先定义所有变量的计算逻辑，key是变量名，value是计算函数
  const variableComputations = {
    heavyData: () => {
      // 模拟耗时计算：比如从数据库拉取大量数据
      console.log('计算heavyData...');
      return new Array(100000).fill('heavy');
    },
    complexResult: () => {
      console.log('计算complexResult...');
      return Math.pow(2, 30);
    },
    quickValue: () => {
      console.log('计算quickValue...');
      return 42;
    }
  };

  // 用来收集fn用到的变量名
  const usedVars = new Set();

  // 创建Proxy，拦截变量的get操作
  const proxy = new Proxy({}, {
    get(target, propName) {
      if (propName in variableComputations) {
        usedVars.add(propName);
      }
      // 先返回占位值，后面再替换成实际计算结果
      return target[propName];
    }
  });

  // 先执行一次fn，触发Proxy拦截，收集依赖
  fn(proxy);

  // 只计算被fn用到的变量
  const finalVars = {};
  for (const varName of usedVars) {
    finalVars[varName] = variableComputations[varName]();
  }

  // 用实际计算好的变量再执行一次fn，返回结果
  return fn(finalVars);
}

// 使用示例：fn只用到了quickValue，所以只会计算它
outer(vars => {
  console.log('最终输出：', vars.quickValue);
});

这个方案的优势是完全不限制fn的来源，不管它是手写的还是动态生成的，都能精准追踪依赖。唯一要注意的是Proxy的兼容性（现代浏览器和Node.js都支持，IE不支持）。

2. 静态分析：解析AST提前识别依赖 #

如果fn()的代码是可预测的（比如不是用字符串动态生成的函数），可以通过解析函数的AST（抽象语法树）提前找出它用到的外层变量。这种方式不需要运行fn就能拿到依赖，适合需要提前做优化的场景。

可以用esprima、babel-parser这类工具来解析AST，比如：

const esprima = require('esprima');

// 分析fn用到了哪些外层变量
function getFnDependencies(fn, outerVarList) {
  const ast = esprima.parse(fn.toString());
  const dependencies = new Set();

  // 递归遍历AST节点，找出匹配的变量名
  function traverseNode(node) {
    if (node.type === 'Identifier' && outerVarList.includes(node.name)) {
      dependencies.add(node.name);
    }
    // 遍历所有子节点
    Object.values(node).forEach(child => {
      if (typeof child === 'object' && child !== null) {
        traverseNode(child);
      }
    });
  }

  traverseNode(ast);
  return Array.from(dependencies);
}

// 使用示例
const outerVarNames = ['heavyData', 'complexResult', 'quickValue'];
const myFn = () => {
  console.log(quickValue);
  return quickValue * 2;
};

const deps = getFnDependencies(myFn, outerVarNames); // 得到['quickValue']
// 然后就可以只计算deps里的变量了

这个方案的好处是不需要运行fn就能获取依赖，但缺点是如果fn是动态生成的（比如new Function('...')），解析toString可能得不到正确的代码，就会失效。

3. 最简单的惰性计算：用getter延迟执行 #

如果不想写复杂的追踪逻辑，还有个更简单的办法：把每个外层变量包装成惰性getter——只有当fn访问这个变量时，才会执行对应的计算逻辑，没被访问的变量永远不会被计算。

实现起来非常简单：

function outer(fn) {
  const lazyVars = {
    get heavyData() {
      // 计算后删除getter，避免重复计算
      delete this.heavyData;
      console.log('计算heavyData...');
      return this.heavyData = new Array(100000).fill('heavy');
    },
    get complexResult() {
      delete this.complexResult;
      console.log('计算complexResult...');
      return this.complexResult = Math.pow(2, 30);
    },
    get quickValue() {
      delete this.quickValue;
      console.log('计算quickValue...');
      return this.quickValue = 42;
    }
  };

  return fn(lazyVars);
}

// 使用示例：同样只会计算quickValue
outer(vars => {
  console.log('最终输出：', vars.quickValue);
});

这个方案的优势是代码极简，不需要额外依赖，但缺点是无法提前知道哪些变量会被用到——如果需要在执行fn之前就做一些前置处理（比如提前分配资源），这个方案就不适用了。

方案选择总结 #

• 如果fn()完全动态，优先选Proxy运行时追踪；
• 如果fn()代码固定，想提前分析依赖，选AST静态解析；
• 如果追求代码简单，且不需要提前知道依赖，选惰性getter。

内容的提问来源于stack exchange，提问作者Gergő Horváth