显示JavaScript函数调用堆栈的方法

显示JavaScript函数调用堆栈的方法

西风瘦马 发布于 六月 20, 2010

许多大型的JavaScript应用程序间的函数调用关系是非常复杂的，在开发或者调试过程中，经常需要跟踪某个函数是由哪些函数调用后才触发执行的，弄清楚这些函数的调用顺序对我们理解代码的数据流向是非常重要的。

Firebug提供了console.trace()来显示函数堆栈，在需要调试的地方加上下面的一行代码就能显示该函数调用时的上下文关系。IE6就没有这么方便了，它没有提供显示函数堆栈的工具，当不可避免的需要在IE6下调试代码时，使用下面的代码能够显示函数堆栈（建议将下面的JavaScript代码保存为console.trace.js，通过外部引入js的方式引用到页面）：

PLAIN TEXT

JAVASCRIPT:

1. /**
2. * 获取函数名称
3. *
4. * @param {Function} func 函数引用
5. * @return {String} 函数名称
6. */
7. function getFunctionName(func) {
8.     if ( typeof func == 'function' || typeof func == 'object' ) {
9.         var name = ('' + func).match(/function\s*([\w\$]*)\s*\(/);
10.     }
11.     return name && name[1];
12. }
13.  
14. if (!('console' in window)) {
15.     window.console = {};
16. }
17. if (!console.trace) {
18.     /**
19.      * 显示函数堆栈<br/>
20.      * 为了和Firebug统一，将trace方法添加到console对象中
21.      *
22.      * @param {Function} func 函数引用
23.      *
24.      * @example
25. function a() {
26. b();
27. }
28. function b() {
29. c();
30. }
31. function c() {
32. d();
33. }
34. function d() {
35. console.trace();
36. }
38. a();
39.      */
40.     console.trace = function() {
41.         var stack = [],
42.             caller = arguments.callee.caller;
43.  
44.         while (caller) {
45.             stack.unshift(getFunctionName(caller));
46.             caller = caller && caller.caller;
47.         }
48.  
49.         alert('functions on stack:' + '\n' + stack.join('\n'));
50.     }
51. };