快捷導(dǎo)航

JavaScript實現(xiàn)顯示函數(shù)調(diào)用堆棧的方法

更新時間：2016年04月21日 10:03:59 作者：zhangw428

這篇文章主要介紹了JavaScript實現(xiàn)顯示函數(shù)調(diào)用堆棧的方法,實例分析了JavaScript顯示函數(shù)調(diào)用堆棧的具體作用與使用方法,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)顯示函數(shù)調(diào)用堆棧的方法。分享給大家供大家參考，具體如下：

許多大型的JavaScript應(yīng)用程序間的函數(shù)調(diào)用關(guān)系是非常復(fù)雜的，在開發(fā)或者調(diào)試過程中，經(jīng)常需要跟蹤某個函數(shù)是由哪些函數(shù)調(diào)用后才觸發(fā)執(zhí)行的，弄清楚這些函數(shù)的調(diào)用順序?qū)ξ覀兝斫獯a的數(shù)據(jù)流向是非常重要的。

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

JAVASCRIPT代碼如下:

/**
* 獲取函數(shù)名稱
*
* @param {Function} func 函數(shù)引用
* @return {String} 函數(shù)名稱
*/
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) {
  /**
   * 顯示函數(shù)堆棧<br/>
   * 為了和Firebug統(tǒng)一，將trace方法添加到console對象中
   *
   * @param {Function} func 函數(shù)引用
   *
   * @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'));
  }
};

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

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

您可能感興趣的文章: