编程小知识之 JavaScript 调用堆栈

╰半橙微兮° 2021-12-10 13:21 828阅读 0赞

> 本文简述了几种在 JavaScript 中获取调用堆栈(call stack)的方法

#### 使用 console.trace ####

[console][] 支持 trace 方法,使用该方法可以向控制台输出当前的调用堆栈.

示例代码如下:

// logging_trace.js
    
    function add(x, y) { 
        console.trace('add called with ', x, 'and', y);
        return x + y;
    }
     
    function calc() { 
        return add(8, 11) + add(9, 14);
    }
     
    function main() { 
        var x = add(2, 3);
        var y = calc();
    }
     
    main();

Chrome 中的输出如下:  
![image from https://code-maven.com/stack-trace-in-javascript][image from https_code-maven.com_stack-trace-in-javascript]

#### 使用 Error 对象 ####

console.trace 只能向控制台输出调用堆栈,我们并不能直接获取到调用堆栈的数据,但借助 [Error][],我们便可以直接获取当前的调用堆栈了,方法就是访问 Error 对象的 stack 属性:

// logging_trace_with_error.js
    
    function add(x, y) { 
        console.log(new Error().stack);
        return x + y;
    }
     
    function calc() { 
        return add(8, 11) + add(9, 14);
    }
     
    function main() { 
        var x = add(2, 3);
        var y = calc();
    }
    
    main();

同样给出 Chrome 下的输出:  
![image from https://code-maven.com/stack-trace-in-javascript][image from https_code-maven.com_stack-trace-in-javascript 1]

#### 使用 arguments ####

通过使用 [arguments][] 的 callee 和 callee.caller,我们可以逐级查找上一层的调用函数,调用堆栈也就可以得到了.

示例代码稍有些复杂,使用了递归,有兴趣的朋友可以仔细看看:

// logging_stacktrace.js
    
    function add(x, y) { 
        console.log(stacktrace());
        return x + y;
    }
     
    function calc() { 
        return add(8, 11) + add(9, 14);
    }
     
    function main() { 
        var x = add(2, 3);
        var y = calc();
    }
    
    function stacktrace() { 
      function st2(f) { 
        var args = [];
        if (f) { 
            for (var i = 0; i < f.arguments.length; i++) { 
                args.push(f.arguments[i]);
            }
            // substring(9) here to get rid of "function " prefix
            var function_name = f.toString().split('(')[0].substring(9);
            // recur to get previous caller
            return st2(f.caller) + function_name + '(' + args.join(', ') + ')' + "\n";
        } else { 
            return "";
        }
      }
      return st2(arguments.callee.caller);
    } 
     
    main();

Chrome 的输出如下:  
![image from https://code-maven.com/stack-trace-in-javascript][image from https_code-maven.com_stack-trace-in-javascript 2]

#### 参考资料 ####

*  [Stack trace in JavaScript][]

[console]: https://developer.mozilla.org/zh-CN/docs/Web/API/Console
[image from https_code-maven.com_stack-trace-in-javascript]: /images/20211210/75edfd427dff480c8e315d9948abcb63.png
[Error]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error
[image from https_code-maven.com_stack-trace-in-javascript 1]: /images/20211210/b87bfd9ae414497ca2a91d32a13eeaa7.png
[arguments]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments
[image from https_code-maven.com_stack-trace-in-javascript 2]: /images/20211210/171d962e865a40109328b341e668194c.png
[Stack trace in JavaScript]: https://code-maven.com/stack-trace-in-javascript