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

【轉】顯示JavaScript函數呼叫堆疊的方法