DIV CSS 佈局教程網

本文實例講述了JavaScript實現顯示函數調用堆棧的方法。分享給大家供大家參考，具體如下：

許多大型的JavaScript應用程序間的函數調用關系是非常復雜的，在開發或者調試過程中，經常需要跟蹤某個函數是由哪些函數調用後才觸發執行的，弄清楚這些函數的調用順序對我們理解代碼的數據流向是非常重要的。

Firebug提供了console.trace()來顯示函數堆棧，在需要調試的地方加上下面的一行代碼就能顯示該函數調用時的上下文關系。IE6就沒有這麼方便了，它沒有提供顯示函數堆棧的工具，當不可避免的需要在IE6下調試代碼時，使用下面的代碼能夠顯示函數堆棧（建議將下面的JavaScript代碼保存為console.trace.js，通過外部引入js的方式引用到頁面）：

JAVASCRIPT代碼如下:

/**
* 獲取函數名稱
*
* @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'));
  }
};

更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。