• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > JavaScript错误处理和堆栈追踪详解

JavaScript错误处理和堆栈追踪详解

作者:dwqs 字体:[增加 减小] 来源:互联网 时间:2017-05-11

dwqs通过本文主要向大家介绍了javascript 堆栈,javascript详解,javascript详解pdf,网页javascript错误,javascript错误等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

有时我们会忽略错误处理和堆栈追踪的一些细节, 但是这些细节对于写与测试或错误处理相关的库来说是非常有用的. 例如这周, 对于 Chai 就有一个非常棒的PR, 该PR极大地改善了我们处理堆栈的方式, 当用户的断言失败的时候, 我们会给予更多的提示信息(帮助用户进行定位).

合理地处理堆栈信息能使你清除无用的数据, 而只专注于有用的数据. 同时, 当更好地理解 Errors 对象及其相关属性之后, 能有助于你更充分地利用 Errors.

(函数的)调用栈是怎么工作的

在谈论错误之前, 先要了解下(函数的)调用栈的原理:

当有一个函数被调用的时候, 它就被压入到堆栈的顶部, 该函数运行完成之后, 又会从堆栈的顶部被移除.

堆栈的数据结构就是后进先出, 以 LIFO (last in, first out) 著称.

例如:

function c() {
  console.log('c');
}
 
function b() {
  console.log('b');
  c();
}
 
function a() {
  console.log('a');
  b();
}
 
a();
</div>

在上述的示例中, 当函数 a 运行时, 其会被添加到堆栈的顶部. 然后, 当函数 b 在函数 a 的内部被调用时, 函数 b 会被压入到堆栈的顶部. 当函数 c 在函数 b 的内部被调用时也会被压入到堆栈的顶部.

当函数 c 运行时, 堆栈中就包含了 a, b 和 c(按此顺序).

当函数 c 运行完毕之后, 就会从堆栈的顶部被移除, 然后函数调用的控制流就回到函数 b. 函数 b 运行完之后, 也会从堆栈的顶部被移除, 然后函数调用的控制流就回到函数 a. 最后, 函数 a 运行完成之后也会从堆栈的顶部被移除.

为了更好地在demo中演示堆栈的行为, 可以使用 console.trace() 在控制台输出当前的堆栈数据. 同时, 你要以从上至下的顺序阅读输出的堆栈数据.

function c() {
  console.log('c');
  console.trace();
}
 
function b() {
  console.log('b');
  c();
}
 
function a() {
  console.log('a');
  b();
}
 
a();
</div>

在 Node 的 REPL 模式中运行上述代码会得到如下输出:

Trace
  at c (repl:3:9)
  at b (repl:3:1)
  at a (repl:3:1)
  at repl:1:1 // <-- For now feel free to ignore anything below this point, these are Node's internals
  at realRunInThisContextScript (vm.js:22:35)
  at sigintHandlersWrap (vm.js:98:12)
  at ContextifyScript.Script.runInThisContext (vm.js:24:12)
  at REPLServer.defaultEval (repl.js:313:29)
  at bound (domain.js:280:14)
  at REPLServer.runBound [as eval] (domain.js:293:12)
</div>

正如所看到的, 当从函数 c 中输出时, 堆栈中包含了函数 a, b 以及c.

如果在函数 c 运行完成之后, 在函数 b 中输出当前的堆栈数据, 就会看到函数 c 已经从堆栈的顶部被移除, 此时堆栈中仅包括函数 a 和 b.

function c() {
  console.log('c');
}
 
function b() {
  console.log('b');
  c();
  console.trace();
}
 
function a() {
  console.log('a');
  b();
}
</div>

正如所看到的, 函数 c 运行完成之后, 已经从堆栈的顶部被移除.

Trace
  at b (repl:4:9)
  at a (repl:3:1)
  at repl:1:1 // <-- For now feel free to ignore anything below this point, these are Node's internals
  at realRunInThisContextScript (vm.js:22:35)
  at sigintHandlersWrap (vm.js:98:12)
  at ContextifyScript.Script.runInThisContext (vm.js:24:12)
  at REPLServer.defaultEval (repl.js:313:29)
  at bound (domain.js:280:14)
  at REPLServer.runBound [as eval] (domain.js:293:12)
  at REPLServer.onLine (repl.js:513:10)
</div>

Error对象和错误处理

当程序运行出现错误时, 通常会抛出一个 Error 对象. Error 对象可以作为用户自定义错误对象继承的原型.

Error.prototype 对象包含如下属性:

constructor–指向实例的构造函数
message–错误信息
name–错误的名字(类型)

上述是 Error.prototype 的标准属性, 此外, 不同的运行环境都有其特定的属性. 在例如 Node, Firefox, Chrome, Edge, IE 10+, Opera 以及 Safari 6+ 这样的环境中, Error 对象具备 stack 属性, 该属性包含了错误的堆栈轨迹. 一个错误实例的堆栈轨迹包含了自构造函数之后的所有堆栈结构.

如果想了解更多关于 Error 对象的特定属性, 可以阅读 MDN 上的这篇文章.

为了抛出一个错误, 必须使用 throw 关键字. 为了 catch 一个抛出的错误, 必须使用 try…catch 包含可能跑出错误的代码. Catch的参数是被跑出的错误实例.

如 Java 一样, JavaScript 也允许在 try/catch 之后使用 finally 关键字. 在处理完错误之后, 可以在 finally 语句块作一些清除工作.

在语法上, 你可以使用 try 语句块而其后不必跟着 catch 语句块, 但必须跟着 finally 语句块. 这意味着有三种不同的 try 语句形式:

try…catch
try…finally
try…catch…finally

Try语句内还可以在嵌入 try 语句:

try {
  try {
    throw new Error('Nested error.'); // The error thrown here will be caught by its own `catch` clause
  } catch (nestedErr) {
    console.log('Nested catch'); // This runs
  }
} catch (err) {
  console.log('This will not run.');
}
</div>

也可以在 catch 或 finally 中嵌入 try 语句:

try {
  throw new Error('First error');
} catch (err) {
  console.log('First catch running');
  try {
    throw new Error('Second error');
  } catch (nestedErr) {
    console.log('Second catch running.');
  }
}
try {
  console.log('The try block is running...');
} finally {
  try {
    throw new Error('Error inside finally.');
  } catch (err) {
    console.log('Caught an error inside the finally block.');
  }
}
</div>

需要重点说明一下的是在抛出错误时, 可以只抛出一个简单值而不是 Error 对象. 尽管这看起来看酷并且是允许的, 但这并不是一个推荐的做法, 尤其是对于一些需要处理他人代码的库和框架的开发者, 因为没有标准可以参考, 也无法得知会从用户那里得到什么. 你不能信任用户会抛出 Error 对象, 因为他们可能不会这么做, 而是简单的抛出一个字符串或者数值. 这也意味着很难去处理堆栈信息和其它元信息.

例如:

function runWithoutThrowing(func) {
  try {
    func();
  } catch (e) {
    console.log('There was an error, but I will not throw it.');
    console.log('The error\'s message was: ' + e.message)
  }
}
 
function funcThatThrowsError() {
  throw new TypeError('I am a TypeError.');
}
 
runWithoutThrowing(funcThatThrowsError);
</div>

如果用户传递给函数 runWithoutThrowing 的参数抛出了一个错误对象, 上面的代码能正常捕获错误. 然后, 如果是抛出一个字符串, 就会碰到一些问题了:

function runWithoutThrowing(func) {
  try {
    func();
  } catch (e) {
    console.log('There was an error, but I will not throw it.');
    console.log('The error\'s message was: ' + e.message)
  }
}
 
function funcThatThrowsString() {
  throw 'I am a String.';
}
 
runWithoutThrowing(funcThatThrowsString);
</div>

现在第二个 console.log 会输出undefined. 这看起来不是很重要, 但如果你需要确保 Error 对象有一个特定的属性或者用另一种方式来处理 Error 对象的特定属性(例如 Chai的throws断言的做法), 你就得做大量的工作来确保程序的正确运行.

同时, 如果抛出的不是 Error 对象, 也就获取不到 stack 属性.

Errors 也可以被作为其它对象, 你也不必抛出它们, 这也是为什么大多数回调函数把 Errors 作为第一个参数的原因. 例如:

const fs = require('fs');
 
fs.readdir('/example/i-do-not-exist', function callback(err, dirs) {
  if (err instanceof Error) {
    // `readdir` will throw an error because that directory does not exist
    // We will now be able to use the error object passed by it in our callback function
    console.log('Error Message: ' + err.message);
    console.log('See? We can use Errors without using try statements.');
  } else {
    console.log(dirs);
  }
});




 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JavaScript错误处理和堆栈追踪详解

相关文章

  • 2017-05-11基于Nodejs利用socket.io实现多人聊天室
  • 2017-05-11微信小程序 页面跳转及数据传递详解
  • 2017-05-11微信小程序商城项目之侧栏分类效果(1)
  • 2017-05-11JS组件系列之JS组件封装过程详解
  • 2017-05-11Node.js Mongodb 密码特殊字符 @的解决方法
  • 2017-05-11jQuery实现鼠标跟随效果
  • 2017-05-11详解nodejs微信公众号开发——4.自动回复各种消息
  • 2017-05-11NodeJS实现客户端js加密
  • 2017-05-11bootstrap table 多选框分页保留示例代码
  • 2017-05-11微信小程序page的生命周期和音频播放及监听实例详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • AngularJs上传前预览图片的实例代码
    • SyntaxHighlighter自动识别并加载脚本语言 原创
    • JS简单实现获取元素的封装操作示例
    • 12306 刷票脚本及稳固刷票脚本(防挂)
    • 微信小程序开发入门基础教程
    • H5图片压缩与上传实例
    • js实现导航吸顶效果
    • JSON与JS对象的区别与对比
    • Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
    • 80%应聘者都不及格的JS面试题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有