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

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

  许多大型的JavaScript应用程序间的函数调用关系是非常复杂的,

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

Firebug和Chrome提供了console.trace()来显示函数堆栈,在需要调试的地方加上下面的一行代码就能显示该函数调用时的上下文关系。

IE6就没有这么方便了,它没有提供显示函数堆栈的工具,当不可避免的需要在IE6下调试代码时,使用下面的代码能够显示函数堆栈

(建议将下面的JavaScript代码保存为console.trace.js,通过外部引入js的方式引用到页面):

代码如下:

/**
* 获取函数名称
* @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‘));
  }
};

文章来源:西风瘦马 发布于 六月 20, 2010 http://cshbbrain.iteye.com/blog/1833461

时间: 2024-11-05 18:29:31

【转】显示JavaScript函数调用堆栈的方法的相关文章

javascript函数调用的各种方法!!

在JavaScript中一共有下面4种调用方式: (1) 基本函数调用 (2)方法调用 (3)构造器调用 (4)通过call()和apply()进行调用 1. 基本函数调用 普通函数调用模式,如: JavaScript code? 1 2 3 4   function fn(o){      --    }   fn({x:1}); 在基本函数调用中, (1)每个参数作为实参传递给声明函数时定义的形参: (2)this被绑定到全局变量(直接调用一般指的是window) JavaScript co

在linux代码中打印函数调用的堆栈的方法

之前一直有这样的需求,当时问到,也没搜到方法,现在竟然既问到了,也搜到了,哎,世事真是不能强求啊! 在Linux内核调试中,经常用到的打印函数调用堆栈的方法非常简单,只需在需要查看堆栈的函数中加入: dump_stack();或 __backtrace();即可. dump_stack()在~/kernel/ lib/Dump_stack.c中定义 void dump_stack(void){ printk(KERN_NOTICE  "This architecture does not imp

JavaScript的数组实现队列与堆栈的方法

JavaScript的数组实现队列与堆栈的方法 今天在项目中要使用JavaScript实现数据结构中的队列和堆栈,这里做一下总结. 一.队列和堆栈的简单介绍 1.1.队列的基本概念 队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出! 如下图所示: 1.2.堆栈的基本概念 堆栈:是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出! 如下图所示: 二. 在JavaScript中实现队列和堆栈 在JavaScript中实现队列和数组主要是通过数组,js数组中提供了以

JavaScript调用函数的方法

摘要:这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性,当我们选择面对它的时候,这将成为我们前进的阻碍.  作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的作用非常相似,但是我们一会儿可以看到

JavaScript函数调用规则

1. [代码][JavaScript]代码     JavaScript函数调用规则一 (1)全局函数调用:function makeArray( arg1, arg2 ){    return [this , arg1 , arg2 ];}这是一个最常用的定义函数方式.相信学习JavaScript的人对它的调用并不陌生.调用代码如下:makeArray('one', 'two');// => [ window, 'one', 'two' ] 这种方式可以说是全局的函数调用.为什么说是全局的函数

5种 JavaScript 调用函数的方法

一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍. 作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的作用非常相似,但是我们一会儿可以看到还是有非常重要的不同的地方的,忽视这些差异无疑会导致难于跟踪的bug.首先让我们创建一个简单的函数,这个函数将在将在下文中使用

javascript中的toString()方法

javascript中的toString()方法,主要用于Array.Boolean.Date.Error.Function.Number等对象.下面是这些方法的一些解析和简单应用,做个纪律,以作备忘. (1)Array.toString():将数组转换成一个字符串,并且返回这个字符串.描述:当数组用于字符串环境中时,javascript会调用这一方法将数组自动转换成一个字符串.toString()在把数组转换成字符串时,首先要将数组的每个元素都转换成字符串(通过调用这些元素的toString方

在C语言中破坏函数调用堆栈

1 // 这段代码显示,在C语言修改函数的返回地址 2 int test1() 3 { 4 return 0; 5 } 6 7 int test2(int a) 8 { 9 *(&a-1) = (int)test1; // 将返回地址修改为test1 10 return a; 11 } 12 13 int main() 14 { 15 test2(10); 16 return 0; 17 } 在C语言中破坏函数调用堆栈,布布扣,bubuko.com

从汇编角度来理解linux下多层函数调用堆栈执行状态

注:在linux下开发经常使用的辅助小工具: readelf .hexdump.od.objdump.nm.telnet.nc 等,详细能够man一下. 我们用以下的C代码来研究函数调用的过程. C++ Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 int bar(int c, int d) { int e = c + d; return e; } int foo(int a, int b) { return bar(a, b); } int main(