062_JavaScript异常

最新推荐文章于 2024-09-15 20:32:26 发布

原创最新推荐文章于 2024-09-15 20:32:26 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JavaScript学习专栏收录该内容

105 篇文章

订阅专栏

本文详细介绍了JavaScript中的异常处理机制，包括try、catch、finally语句的使用，以及如何通过throw创建自定义错误。同时，列举了JavaScript内置的Error对象及其子类型，如RangeError、ReferenceError、SyntaxError、TypeError和URIError，并通过实例展示了如何捕获和处理这些错误。文章还提供了一个计算器函数，演示了在不同错误情况下如何优雅地抛出和捕获错误。

1. try语句使您能够测试代码块中的错误。

2. catch语句允许您处理错误。

3. throw语句允许您创建自定义错误。

4. finally在try和catch之后, 无论结果如何, 使您能够执行代码。

5. try和catch

5.1. try语句允许您定义一个代码块, 以便在执行时检测错误。

5.2. 如果try代码块中发生错误, catch语句允许你定义一个要执行的代码块。

5.3. JavaScript语句try和catch成对出现:

try {
    供测试的代码块
}
catch(err) {
    处理错误的代码块
}

6. throw语句

6.1. throw语句允许您创建自定义错误。

6.2. 自定义错误可以是字符串、数字、布尔或对象。

6.3. 如果把throw与try和catch一同使用, 就可以控制程序流并生成自定义错误消息。

7. finally语句

7.1. finally语句允许您在try和catch之后执行代码, 无论结果如何:

try {
    供测试的代码块
}
catch(err) {
    处理错误的代码块
} 
finally {
    无论try/catch结果如何都执行的代码块
}

8. Error对象

8.1. JavaScript拥有当错误发生时提供错误信息的error对象。

8.2. error对象提供两个有用的属性: name和message。

8.3. Error对象属性

9. Error的name属性

9.1. error的name属性可返回六个不同的值:

10. EvalError错误

10.1. 错误调用eval()函数中的发生EvalError错误。

10.2. 更新版本的JavaScript不会抛出任何EvalError。使用其它几个错误代替。

11. RangeError错误

11.1. RangeError会在您使用了合法值的范围之外的数字时抛出。

function myRangeError(){
	try {
		var num = 1;
	    num.toPrecision(500);   // 数无法拥有500个有效数
	}
	catch(err) {
	    document.getElementById("showError").innerHTML = err.name + ': ' + err.message;
	}
}

12. ReferenceError错误

12.1. 假如您使用(引用)了尚未声明的变量, 则ReferenceError会被抛出:

function myReferenceError(){
	try {
		var x = y + 1;   // y无法被引用
	}
	catch(err) {
	    document.getElementById("showError").innerHTML = err.name + ': ' + err.message;
	}
}

13. SyntaxError错误

13.1. 如果编写代码语法不对, 会SyntaxError被抛出:

function mySyntaxError(){
	try {
	    eval("var num = 2; isNaN(num) ? throw '这里居然是语法错误' : +num;");
	}
	catch(err) {
	    document.getElementById("showError").innerHTML = err.name + ': ' + err.message;
	}
}

14. TypeError错误

14.1. 假如您使用的值不在期望值的类型, 则TypeError被抛出:

function myTypeError(){
	try {
		var num = 3;
	    num.toUpperCase();   // 您无法将数字转换为大写
	}
	catch(err) {
	    document.getElementById("showError").innerHTML = err.name + ': ' + err.message;
	}
}

15. URIError错误

15.1. 假如您在URI函数中使用非法字符, 则URIError被抛出:

function myURIError(){
	try {
		decodeURI("%%%");   // 您无法对这些百分号进行URI编码
	}
	catch(err) {
	    document.getElementById("showError").innerHTML = err.name + ': ' + err.message;
	}
}

16. 例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JavaScript异常</title>
	</head>
	<body>
		<script type="text/javascript">
			function Calculator(){}

			Calculator.Add = function(p1, p2){
				if(p1 === ''){
					throw {name: 'TypeError', message: '第一个参数是空字符串'};
				}
				if(isNaN(p1)){
					throw {name: 'TypeError', message: p1 + '不是数字'};
				}
				if(p2 === ''){
					throw {name: 'TypeError', message: '第二个参数是空字符串'};
				}
				if(isNaN(p2)){
					throw {name: 'TypeError', message: p2 + '不是数字'};
				}

				var result = (+p1) + (+p2);
				if(result === Infinity){
					throw {name: 'RangeError', message: '计算结果太大'};
				}
				if(result === -Infinity){
					throw {name: 'RangeError', message: '计算结果太小'};
				}

				return result;
			}

			function doAdd(){
				var p1 = document.getElementById('p1').value;
				var p2 = document.getElementById('p2').value;

				try {
					document.getElementById("result").innerHTML = Calculator.Add(p1, p2);
				}
				catch(err) {
				    document.getElementById("result").innerHTML = err.name + ': ' + err.message;
				}
				finally {
					p1 = null;
					p2 = null;
				}
			}

			function myRangeError(){
				try {
					var num = 1;
				    num.toPrecision(500);   // 数无法拥有500个有效数
				}
				catch(err) {
				    document.getElementById("showError").innerHTML = err.name + ': ' + err.message;
				}
			}

			function myReferenceError(){
				try {
					var x = y + 1;   // y无法被引用
				}
				catch(err) {
				    document.getElementById("showError").innerHTML = err.name + ': ' + err.message;
				}
			} 

			function mySyntaxError(){
				try {
				    eval("var num = 2; isNaN(num) ? throw '这里居然是语法错误' : +num;");
				}
				catch(err) {
				    document.getElementById("showError").innerHTML = err.name + ': ' + err.message;
				}
			} 

			function myTypeError(){
				try {
					var num = 3;
				    num.toUpperCase();   // 您无法将数字转换为大写
				}
				catch(err) {
				    document.getElementById("showError").innerHTML = err.name + ': ' + err.message;
				}
			} 

			function myURIError(){
				try {
					decodeURI("%%%");   // 您无法对这些百分号进行URI编码
				}
				catch(err) {
				    document.getElementById("showError").innerHTML = err.name + ': ' + err.message;
				}
			}  
		</script>

		<input type="text" id="p1" /> + <input type="text" id="p2" /> = <span id="result"></span> <br /> <br />
		<span id="showError" style="color: red;"></span> <br /> <br />

		<button onclick="doAdd()">计算加法</button>
		<button onclick="myRangeError()">RangeError</button>
		<button onclick="myReferenceError()">ReferenceError</button>
		<button onclick="mySyntaxError()">SyntaxError</button>
		<button onclick="myTypeError()">TypeError</button>
		<button onclick="myURIError()">URIError</button>
	</body>
</html>