如何在方法中获取调用该方法的变量名称？

你想要重写HTMLCanvasElement.prototype.toDataURL方法，在方法内部获取调用它的变量名（比如示例中的canvasParam），以下是具体实现思路和方案：

核心说明 #

JavaScript本身没有原生API直接获取调用方法的变量名——变量名只是代码层面的标识符，运行时对象实例和变量名是分离的（同一个对象可以被多个变量引用）。但可以通过解析调用栈的方式，在特定场景下实现需求。

实现代码 #

Object.defineProperty(HTMLCanvasElement.prototype, "toDataURL", {
  value: function (...args) {
    console.log(this.getContext('2d'));
    // 尝试获取调用者变量名
    try {
      throw new Error();
    } catch (e) {
      // 提取调用栈中当前方法的上一层调用行
      const callLine = e.stack.split('\n')[2];
      // 匹配调用语句中的变量名（适配多数浏览器的栈格式）
      const varNameMatch = callLine.match(/([a-zA-Z0-9_$]+)\.toDataURL/);
      if (varNameMatch) {
        console.log("param is ", varNameMatch[1]);
      }
    }
    return "data:,";
  }
});

测试示例 #

var canvasParam = document.createElement("canvas");
canvasParam.width = 400;
canvasParam.height = 200;
var str = canvasParam.toDataURL("image/png");
// 控制台输出：param is canvasParam

局限性说明 #

• 依赖浏览器的调用栈输出格式，不同浏览器可能需要调整正则匹配规则
• 仅适用于未压缩混淆的代码，压缩后变量名会被替换为短标识符，无法获取原始名称
• 仅支持变量名.toDataURL()的调用形式，链式调用（如document.createElement("canvas").toDataURL()）或匿名实例调用无法提取变量名

内容的提问来源于stack exchange，提问作者Николай Сычев