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


Posted in Javascript onApril 21, 2016

本文实例讲述了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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
JS实现队列与堆栈的方法
Apr 21 #Javascript
JS、jQuery中select的用法详解
Apr 21 #Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 #Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 #Javascript
浅析JS动态创建元素【两种方法】
Apr 20 #Javascript
纯JS代码实现一键分享功能
Apr 20 #Javascript
JavaScript动态生成二维码图片
Apr 20 #Javascript
You might like
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
新浪的图片新闻效果
2007/01/13 Javascript
Javascript 二维数组
2009/11/26 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
python 阶乘累加和的实例
2019/02/01 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Python 列表的清空方式
2020/01/13 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Python执行时间的几种计算方法
2020/07/31 Python
新兵入伍心得体会
2014/09/04 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python