JavaScript基础-错误处理Throw、Try、Catch

  • try语句执行可能出错的代码
  • catch语句处理捕捉到的错误
  • throw语句创建自定义错误语句

    发生的常见的错误类型

  • 可能是语法错误,可能是编码错误或者拼写错误
  • 可能是拼写错误或者语言中出现错误(也许是浏览器的差异导致的代码不兼容)
  • 还有可能是由于用户的操作引起的错误
  • 当然还能是由于各种其他不可预知的问题

    JavaScript抛出错误

  • 当错误发生时,当JavaScript引擎出现错误时会停止,并生成一个错误报告
  • 描述这种情况的技术术语是:JavaScript将抛出一个错误

    JavaScript测试与捕获

  • try语句允许我们执行在运行时进行错误测试的代码
  • catch语句允许我们在JavaScript出错时所执行的代码块
  • try语句和catch语句总是成对出现的

    例如:

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()">
</body>
</html>

throw语句

  • throw语句允许我们创建自定义错误
  • 常见的术语是:创建或者抛出异常(exception)
  • 把throw和try还有catch一起使用可以控制程序流,创建自定义的错误
  • 语法是:throw exception
  • 抛出的对象可以使字符串、数字、逻辑值和对象
<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>

使用try-catch-finally

finally里面的语句一定会执行,即使try-catch没有执行,finally最终都会执行的,即使是return返回语句

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
    try{
        var x = document.getElementById("hello");
        if(!x) throw "this is object is gone!";
    }catch(err){
        alert(err+" "+typeof err);
    }finally{
        console.log("这里的代码终究都是执行的!");
    }
}

</script>
</head>
<body>
</body>
</html>

函数中有try-catch-finally时候的返回机制

  • 一般在函数内部遇见return直接就停止执行函数直接结束
  • 但是假如函数内部有finally即使try中已经执行了return,若是finally中有return的话,还是按照finally的算

    错误类型的总结(准确分析错误类型,获取更多错误信息)

  • Error,基类型,其他的错误都是继承自该错误的,因此其他错误都共享了一组相同的属性
  • Eval错误,EvalError,是在使用eval()函数时被抛出的错误
  • 范围错误,RangeError,数值超出一定范围时会抛出

    var a=new Array(-10);//Uncaught RangeError: Invalid array length
  • 变量引用错误,ReferenceError,找不到引用对象时会报出这个错误,通常出现在访问不存在的变量时会发生
  • SyntaxError语法错误,表示出现语法错误
  • TypeError变量类型不符
  • URIError,在使用encodeURL()和decodeURL()时会出现这个错误

错误类型的处理,使用instanceof进行检测

<!DOCTYPE html>
<html>
<head>
<script>
function typeError(){
    try{
        var x = document.querySelects("body");
    }catch(err){
        if(err instanceof TypeError){
            console.log("类型错误");
        }
        else if(err instanceof ReferenceError){
            console.log("引用错误");
        }
        else if(err instanceof RangeError){
            console.log("范围错误");
        }
        else if(err instanceof SyntaxError){
            console.log("语法错误");
        }
        else if(err instanceof TypeError){
            console.log("类型错误");
        }else{
            console.log("其他错误!");
        }
    }
}
typeError();
</script>
</head>
<body>
</body>
</html>

throw抛出的不同的对象类型最常用的是:Error通用类型、范围错误RangeError,变量引用错误ReferenceError、变量类型错误TypeError

throw  new Error("抛出通用错误");//Uncaught Error: 抛出通用错误
throw  new Error(抛出通用错误);//Uncaught ReferenceError,抛出通用错误 is not defined;
throw new SyntaxError("SyntaxError语法错误");
throw new RangeError("RangeError范围错误");
throw new ReferenceError("ReferenceError变量引用错误");
throw new TypeError("TypeError变量类型错误");

注意:构造错误的时候需要给错误信息加上引号,错误信息其实就是string

除了window的Error对象还有错误事件对象

window.onerror = function(message,url,line){   //带有message,url和行号
    alert(message);
}

JavaScript基础——兼容性、错误处理的更多相关文章

  1. JavaScript基础——添加错误处理

    JavaScript编程的一个重要组成部分,是添加错误处理来应对可能会出现的问题.默认情况下,如果因为你的JavaScript中的问题二产生了一个代码异常,那么脚本就会失败并且无法完成加载.这通常不是 ...

  2. 2016.3.17__ JavaScript基础_1__第十二天

    Javascript基础 首先说声抱歉. 今日涉及内容难易度不统一,所以很多比較基础的属性直接通过思维导图展示了. 同一时候须要注意,今日思维导图中的内容和笔记中并非一一相应的,请读者自行对比查看. ...

  3. javascript基础入门知识点整理

    学习目标: - 掌握编程的基本思维 - 掌握编程的基本语法 typora-copy-images-to: media JavaScript基础 HTML和CSS 京东 课前娱乐 众人皆笑我疯癫,我笑尔 ...

  4. JavaScript基础语法资料

    JavaScript基础第01天 1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...

  5. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  6. 一步步学习javascript基础篇(0):开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  7. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  8. 一步步学习javascript基础篇(3):Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  9. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

随机推荐

  1. linux下简单限制网卡速度

    Linux下限制网卡的带宽,可用来模拟服务器带宽耗尽,从而测试服务器在此时的访问效果. 1.安装iproute yum -y install iproute 2.限制eth0网卡的带宽为50kbit: ...

  2. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  3. JS 继承(类式 与 原型式)

    1. /* -- 类式继承 -- *///先声明一个超类 function Person(name) { this.name = name;}//给这个超类的原型对象上添加方法 getName Per ...

  4. thinkphp 配置项总结

    'URL_PATHINFO_DEPR'=>'-',//修改URL的分隔符 'TMPL_L_DELIM'=>'<{', //修改左定界符 'TMPL_R_DELIM'=>'}&g ...

  5. Unity游戏开发——自动为动画剪辑添加事件 之 最后几帧的事件不能被调用的问题

    最近在做一个根据配置表自动生成动画剪辑clip以及controller的功能.做法是根据配置表配置的动作以及每个动作的关键帧,自动为每个clip添加事件.这样做可以把动画的事件处理在游戏运行之前就计算 ...

  6. Express 3.0新手指南入门教程

    在确认已经安装了node之后(下载), 在你的机器上创建一个目录,让我们来开始你的第一个应用程序吧 $ mkdir hello-world 在这个目录中你首先得定义一下你的应用程序“包”文件,它和其它 ...

  7. 不使用模板导出Excel(C#版本)

    不多说,直接上干货! using System; using System.Collections.Generic; using System.Linq; using System.Web; usin ...

  8. H.264转码加速:NVENC大战Quick Sync

    GPU加速技术对普通消费者最直观的影响就是视频转码应用上了,NVIDIA..AMD以及Intel都有自己的加速技术,而在新一代CPU和GPU架构上,三方都有更新的技术方案.<br>< ...

  9. [原创]Hadoop-2.5.2-HA原文译

    使用the Quorum Journal Manager实现HDFS高可用 2017/1/22 11:57:22 原文 目的(Purpose) * 这个指南提供了对HDFS-HA特性,使用QJM特性如 ...

  10. Redis 介绍与安装

    Redis  是Key-Value 类型的内存数据库,支持多数据结构,性能非常出色,每秒处理十万次读写操作. 整个大致的过程是: 整个数据库加载到内存中,操作之,通过异步定期处理数据库数据的刷新到硬盘 ...