JavaScript如何实现显示函数调用堆栈

本篇内容介绍了“JavaScript如何实现显示函数调用堆栈”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

Firebug提供了console.trace()来显示函数堆栈，在需要调试的地方加上下面的一行代码就能显示该函数调用时的上下文关系。IE6就没有这么方便了，它没有提供显示函数堆栈的工具，当不可避免的需要在IE6下调试代码时，使用下面的代码能够显示函数堆栈（建议将下面的JavaScript代码保存为console.trace.js，通过外部引入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如何实现显示函数调用堆栈”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！