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

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

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

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

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. }

  37. a();
  38.      */
  39.     console. trace = function ( ) {
  40.         var stack = [ ],
  41.             caller = arguments. callee. caller;
  42.  
  43.         while (caller ) {
  44.             stack. unshift (getFunctionName (caller ) );
  45.             caller = caller && caller. caller;
  46.         }
  47.  
  48.         alert ( 'functions on stack:' + '\n' + stack. join ( '\n' ) );
  49.     }
  50. };

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值