【轉】顯示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