如何获取并输出JavaScript函数内部的变量及其值？

问题描述 #

我尝试输出脚本中的所有变量及其对应值。目前用for语句能正常输出函数外部的变量，但无法获取函数内部的变量（比如示例中的k12，预期输出var k12 = 25），该怎么实现？

代码示例：

var labor_rate = 25;
var k1 = labor_rate

function myFunction() {
    var labor_rate2 = 25;
    var k12 = labor_rate2
}

// output all variables
var variables = {};
for(var b in window) {
    if(window.hasOwnProperty(b)) {
        console.log(b+" = "+window[b]);
        variables[b] = window[b];
    }
}

核心原因 #

函数内部用var声明的变量属于函数作用域，仅在函数内部生效，不会挂载到全局window对象上，所以遍历window的方式根本拿不到这类变量。

解决方案 #

方法1：将内部变量挂载到全局（不推荐，仅临时调试用） #

如果只是临时需要全局访问函数内变量，可以把变量绑定到window上，但这种写法会污染全局作用域，不适合生产环境：

function myFunction() {
    window.labor_rate2 = 25;
    window.k12 = labor_rate2
}
// 必须先调用函数，变量才会被创建到window上
myFunction();

// 再执行遍历代码就能拿到k12
var variables = {};
for(var b in window) {
    if(window.hasOwnProperty(b)) {
        console.log(b+" = "+window[b]);
        variables[b] = window[b];
    }
}

方法2：通过函数返回内部变量（推荐） #

更规范的方式是让函数返回内部变量的集合，再和全局变量合并：

var labor_rate = 25;
var k1 = labor_rate

function myFunction() {
    var labor_rate2 = 25;
    var k12 = labor_rate2;
    // 返回内部变量组成的对象
    return { labor_rate2, k12 };
}

// 调用函数获取内部变量
var funcInnerVars = myFunction();
// 合并全局变量与函数内部变量
var allVariables = { ...window, ...funcInnerVars };

// 输出所有变量
for(var key in allVariables) {
    if(allVariables.hasOwnProperty(key)) {
        console.log(key + " = " + allVariables[key]);
    }
}

方法3：函数内部直接输出（调试场景） #

如果只是调试查看内部变量，直接在函数内部打印即可，无需暴露到全局：

function myFunction() {
    var labor_rate2 = 25;
    var k12 = labor_rate2;
    // 直接打印内部变量
    console.log("函数内部变量：");
    console.log("labor_rate2 =", labor_rate2);
    console.log("k12 =", k12);
}

// 先调用函数输出内部变量，再遍历全局变量
myFunction();

var variables = {};
for(var b in window) {
    if(window.hasOwnProperty(b)) {
        console.log(b+" = "+window[b]);
        variables[b] = window[b];
    }
}

关键提醒 #

函数作用域的核心目的是封装逻辑、避免全局污染，除非有明确需求，不要随意把内部变量暴露到全局。生产环境优先使用「函数返回值」的方式获取内部变量，禁止使用eval或隐式全局变量这类不安全写法。

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