理解JS下的“异常传播”

2020-05-29 14:33:45 浏览数 (1)

今天看了廖雪峰老师的一篇文章关于处理异常的,写的很不错,总结一下!

我们都知道JS里面的函数是非常重要的一部分,也是学习JS的精髓所在,那函数分为很多种,看你怎么分,可以分为有参函数和无参函数,按照返回值分为有返回值的函数和没有返回值的函数,那么在写函数的时候我们经常遇到一个问题就是异常的处理,之前在写Java的时候其实也是一样会遇到这样的问题,那么在java里面其实只要你觉得哪里可能会出问题的时候,你只需要将代码try-catch捕捉一下将异常处理就行了,在js里面呢其实也是一样的,例如下面的例子:

代码语言:javascript复制
function test(s){
			try{
				$("#console").append("参数的长度是" s.length);
			}catch(e){
				$("#console").append("异常里面参数的长度是" e);
			}
		}
		test(null);

打印出来的是:

代码语言:javascript复制
异常里面参数的长度是TypeError: Cannot read property 'length' of null

这句话也就是我们处理异常的时候写的,也是最常见的一种,这个函数叫做有参函数, 那么我们捕捉的是参数会不会有问题,如果有问题我们就将异常捕捉出来,这是很常规的一种写法,今天我们要说的是异常传播是什么意思呢?

其实我们在写js函数的时候很多的时候不会是一个函数,会有很多的函数接连的调用,那么任何一个函数出问题其实都是应该捕捉的,理论上是这样的是吧,但是这样写代码的话就很麻烦了,所以就出现了下面这样的代码:

代码语言:javascript复制
 function  start(ele){
		                $("#console").append("start-fun" "<br/>");
		        try {
		        	second(ele);
		        } catch (e) {
			        $("#console").append("错误" e "<br/>");
	        	}
			        $("#console").append("end-fun" "<br/>");
			}
			
			function second(ele){
				$("#console").append("start-second" "<br/>");
				three(ele);
				$("#console").append("end-second" "<br/>");
			}
			
			function three(ele){
				$("#console").append("start-three" "<br/>");
				$("#console").append("参数的长度是" ele.length);
				$("#console").append("end-three" "<br/>");
			}
			start(null); 

这里的函数是三个有参函数,一般我们遇到的时候要求说写上异常捕捉,我们会将每一个函数都写上,其实只要在一个合适的函数哪里写上就可以了,因为如果在一个函数内部发生了错误,它自身没有捕获,错误就会被抛到外层调用函数,如果外层函数也没有捕获,该错误会一直沿着函数调用链向上抛出,直到被JavaScript引擎捕获,代码终止执行。所以,我们不必在每一个函数内部捕获错误,只需要在合适的地方来个统一捕获,一网打尽

运行的结果是:

代码语言:javascript复制
start-fun
start-second
start-three
错误TypeError: Cannot read property 'length' of null
end-fun

PS:不要纠结于我为什么不用console.log()来打印,我习惯了写到页面上!

所以以后遇到了就不用每一个都写上异常捕捉了,只需要写一个就行了。

0 人点赞