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 相关文章推荐
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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 文件上传全攻略
2010/04/28 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python基于动态规划算法计算单词距离
2015/07/25 Python
实用自动化运维Python脚本分享
2018/06/04 Python
Python数据集切分实例
2018/12/08 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
.NET程序员的数据库面试题
2012/10/10 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
三好学生自我鉴定
2013/12/17 职场文书
企业为何需要商业计划书
2013/12/26 职场文书
安全责任书范文
2014/03/12 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
春晚观后感
2015/06/11 职场文书
增值税发票丢失证明
2015/06/19 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
技术入股协议书
2016/03/22 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers