本文介绍在JavaScript中显示函数调用堆栈的方法。针对Firebug提供的console.trace()，说明其直接用法。对于IE6等不支持该功能的浏览器，提供了一段自定义JavaScript代码，通过模拟console.trace对象实现堆栈追踪，帮助开发者理清复杂应用中的函数调用顺序与数据流向。
JavaScript显示函数调用堆栈的方法
本文分享一种在JavaScript中获取并展示函数调用堆栈的技术方案，供开发者参考。
在大型JavaScript应用中，函数间的调用关系往往错综复杂。开发或调试阶段，经常需要追踪某个函数是由哪些前置函数触发执行的。明确这些函数的调用顺序，对于理解代码的数据流向至关重要。
Firebug提供了console.trace()接口来显示函数堆栈，在需要调试的代码位置添加一行该调用即可显示当前的上下文关系。IE6等旧版浏览器缺乏此类内置工具，若需在IE6环境下调试，可使用下文提供的JavaScript代码来模拟堆栈显示功能（建议将此段代码保存为console.trace.js，并通过外部引入方式加载到页面中）。
JavaScript核心实现代码如下：
/**
* 获取函数名称
*
* @param {Function} func 函数引用
* @return {String} 函数名称
*/
function getFunctionName(func) {
if ( typeof func == 'function' || typeof func == 'object' ) {
var name = ('' + func).match(/function\s*([\w\$]*)\s*\(/);
}
return name && name[1];
}
if (!('console' in window)) {
window.console = {};
}
if (!console.trace) {
/**
* 显示函数堆栈<br/>
* 为了和Firebug统一，将trace方法添加到console对象中
*
* @param {Function} func 函数引用
*
* @example
function a() {
b();
}
function b() {
c();
}
function c() {
d();
}
function d() {
console.trace();
}
a();
*/
console.trace = function() {
var stack = [],
caller = arguments.callee.caller;
while (caller) {
stack.unshift(getFunctionName(caller));
caller = caller && caller.caller;
}
alert('functions on stack:' + '\n' + stack.join('\n'));
}
};
如需了解更多JavaScript相关知识，可参考本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望本文所述内容对JavaScript程序设计工作有所助益。