JavaScript Error 对象与全局错误捕获 onerror

Error

通过 Error 的构造器可以创建一个错误对象。当运行时错误产生时，Error 的实例对象会被抛出

tip

当像函数一样使用 Error 时 -- 如果没有 new，它将返回一个 Error 对象。所以，仅仅调用 Error 产生的结果与通过 new 关键字构造 Error 对象生成的结果相同。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script>
      const x = Error('I was constructed via the "new" keyword!');
      const y = new Error('I was constructed via the "new" keyword!');

      // object
      console.log('typeof x:', typeof x);
      // object
      console.log('typeof y:', typeof y);

      console.log('message:', y.message);
      console.log('name:', y.name);
      console.log('fileName:', y.fileName);
      console.log('stack:', y.stack);
      console.log('columnNumber:', y.columnNumber);
      console.log('lineNumber:', y.lineNumber);
    </script>
  </body>
</html>

Error 对象的非标准属性： | 属性 | 描述 |
| :-----😐 :----: | | name | error 类型的名称.初始值为 Error | | message | 错误信息 | | fileName | 仅 FireFox 支持发生错误或异常的文件名，例如 http://localhost/test.php | | lineNumber | 仅 FireFox 支持发生错误或异常的行号，例如：51 | | columnNumber | 仅 FireFox 支持发生错误或异常的列号，例如：2 | | stack | FireFox/Chrome/IE10+ 支持返回错误或异常的代码跟踪信息，例如 @http://localhost/test.php:51:2 |

window.onerror

当 JavaScript 运行时错误（包括语法错误）发生时，window 会触发一个 ErrorEvent 接口的 error 事件，并执行 window.onerror()。

函数参数：

message：错误的描述信息
source：发生错误的脚本 URL（字符串）
lineno：发生错误的行号（数字）
colno：发生错误的列号（数字）
error：Error 对象

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script>
      /**
   * 能捕获到js执行错误，不能捕获带有src的标签元素的加载错误。
   参数对应5个值（错误信息，所在文件，行，列，错误信息）
   函数体内用return true可以不让异常信息输出到控制台
   * @param message 错误的描述信息
   * @param source 发生错误的脚本URL（字符串）
   * @param lineno 发生错误的行号（数字）
   * @param colno 发生错误的列号（数字）
   * @param error Error对象
   * @returns {boolean}
   */
      window.onerror = function (message, source, lineno, colno, error) {
        console.log('message:', message);
        console.log('source:', source);
        console.log('lineno:', lineno);
        console.log('colno:', colno);
        console.log('error:', error);
        return true;
      };
      a.slice(1);
    </script>
  </body>
</html>

window.addEventListener(error)

为捕获状态时（第三个参数为 true）能捕获到 js 执行错误，也能捕获带有 src 的标签元素的加载错误。
为冒泡状态时（第三个参数为 false）能捕获到 js 执行错误，不能捕获带有 src 的标签元素的加载错误。
参数对应 1 个值，异常事件，错误信息都在里面
函数体内用 preventDefault 可以不让异常信息输出到控制台

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <img style="width: 100px;height: 100px" src="" />
    <script>
      window.addEventListener(
        'error',
        function (event) {
          console.log(event);
        },
        false,
      );
      a;
    </script>
  </body>
</html>