你不容错过的JavaScript高级语法(错误处理)

众所周知，js在前端开发中的地位。学好它，真的很重要。

下面这篇文章，介绍一下错误处理。

错误处理

开发中我们会封装一些工具函数，封装之后给别人使用：

在其他人使用的过程中，可能会传递一些参数。
对于函数来说，需要对这些参数进行验证，否则可能得到的是我们不想要的结果。

很多时候我们可能验证到不是希望得到的参数时，就会直接return。但是return存在很大的弊端：调用者不知道是因为函数内部没有正常执行，还是执行结果就是一个undefined。

事实上，正确的做法应该是如果没有通过某些验证，那么应该让外界知道函数内部报错了。

如何可以让一个函数告知外界自己内部出现了错误呢？

通过throw关键字，抛出一个异常。
throw语句用于抛出一个用户自定义的异常。
当遇到throw语句时，当前的函数执行会被停止（throw后面的语句不会执行）。
如果不处理抛出的错误，那么整个程序也会就此停止。如果我们执行代码，就会报错，拿到错误信息的时候我们可以及时的去修正代码。

throw

throw表达式就是在throw后面可以跟上一个表达式来表示具体的异常信息。

throw关键字可以跟上哪些类型呢？

基本数据类型：比如number、string、Boolean。
对象类型：对象类型可以包含更多的信息。

    // 2.比较常见的是抛出一个对象类型
    throw { errorCode: -1001, errorMessage: "type不能为0~" }

其实，在开发中基本上都是t通过调用Error类来抛出错误信息。

    const err = new Error("当前type类型是错误的~")
    throw err

Error包含三个属性：

messsage：创建Error对象时传入的message。
name：Error的名称，通常和类的名称一致。
stack：整个Error的错误信息，包括函数的调用栈，当我们直接打印Error对象时，打印的就是stack。

Error有一些自己的子类：

RangeError：下标值越界时使用的错误类型。
SyntaxError：解析语法错误时使用的错误类型。
TypeError：出现类型错误时，使用的错误类型。

    function foo(type) {
      console.log("foo函数开始执行")

      if (type === 0) {

        throw  new TypeError("当前type类型是错误的~")

        // 强调: 如果函数中已经抛出了异常, 那么后续的代码都不会继续执行了
        console.log("foo函数后续的代码")
      }

      console.log("foo函数结束执行")
    }

    foo(0)

    console.log("后续的代码继续执行~")

异常的处理

从上面可以了解到，如果未对抛出的错误处理，那么将会终止程序的执行。

这是因为如果我们在调用一个函数时，这个函数抛出了异常，但是我们并没有对这个异常进行处理，那么这个异常会继续传递到上一个函数调用中。
而如果到了最顶层（全局）的代码中依然没有对这个异常的处理代码，这个时候就会报错并且终止程序的运行。

我们先来看一下这段代码的异常传递过程：

    function foo() {
      throw new Error("foo----")
    }

    

    function bar() {
      foo()
    }
    
    function test() {
      bar()
    }

    test()

foo函数在被执行时会抛出异常，也就是我们的bar函数会拿到这个异常。
但是bar函数并没有对这个异常进行处理，那么这个异常就会被继续传递到调用bar函数的函数，也就是test函数。
但是test函数依然没有处理，就会继续传递到我们的全局代码逻辑中。
依然没有被处理，这个时候程序会终止执行，后续代码都不会再执行了。所以我们就需要在出现错误的位置，捕获错误，来使程序能正确运行。所以就需要try catch语法。

    function foo() {
      throw new Error("foo----")
    }

    function bar() {
      try {
      foo(0)
        console.log("bar函数后续的继续运行")
        return 2
      } catch(err) {
        console.log("err:", err.message)
        return 1
      } finally {
        console.log("finally代码执行~, close操作")
        return 0
      }
      return 3
    }

    function test() {
        console.log(bar()) // 0
    }

    test()

在ES10（ES2019）中，catch后面绑定的error可以省略。

当然，如果有一些必须要执行的代码，我们可以使用finally来执行。finally表示最终一定会被执行的代码结构。

注意：如果try,catch和finally中都有返回值，那么会使用finally当中的返回值。