【备战春招】第7天破解JavaScript高级玩法第十四讲-原创手记-慕课网

课程名称：** 破解JavaScript高级玩法

课程章节： 亡羊补牢-异常处理

主讲老师： Cloud

课程内容：

今天学习的内容包括：

异常类型判断和自定义异常

课程收获：

14.1 心得：

Error.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error</title>
    <style>
        * {
            font-size: 28px;
        }
    </style>
</head>

<body>

    <button type="button" id="btnEx">执行</button>
    <script>
        function trace() {
            try {
                throw new Error("哦豁，错误哦")
            } catch (err) {
                console.log("err.name", err.name);
                console.log("err.message", err.message);
                console.log("err.stack", err.stack);
                console.log("err.constructor:", err.constructor);
            }
        }
        function b() {
            trace();
        }
        function a() {
            b();
        }
        btnEx.onclick = a;
    </script>
</body>

</html>

EvalError.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EvalError</title>
    <style>
        * {
            font-size: 28px;
        }
    </style>
</head>

<body>

    <button type="button" id="btnEx">执行</button>

    <script>
        btnEx.onclick = function () {
            try {
                new eval();
                eval = function () { };
            } catch (err) {
                console.log("err", err);
                console.log("err.constructor:", err.constructor);
                console.log('instanceof EvalError:', err instanceof EvalError);
            }
        }
    </script>
</body>

</html>

InternalError.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> InternalError </title>
    <style>
        * {
            font-size: 28px;
        }
    </style>
</head>

<body>

    <button type="button" id="btnEx">执行</button>

    <script>
        btnEx.onclick = function () {
            try {
                new eval();
                eval = function () { };
            } catch (err) {
                console.log("err", err);
                console.log("err.constructor:", err.constructor);
                console.log('instanceof EvalError:', err instanceof InternalError);
            }
        }
    </script>
</body>

</html>

RangeError.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RangeError</title>
    <style>
        * {
            font-size: 28px;
        }
    </style>
</head>

<body>

    <button type="button" id="btnEx">执行</button>

    <script>
        btnEx.onclick = function () {
            try {
                new Array(Number.MAX_VALUE)
                // Uncaught RangeError: Invalid array length
                12..toFixed(101)
                // Uncaught RangeError: toFixed() digits argument must be between 0 and 100
                'abc'.repeat(-1);
                // Uncaught RangeError: Invalid count value 
            } catch (err) {
                console.log("err", err);
                console.log("err.constructor:", err.constructor);
                console.log('instanceof EvalError:', err instanceof InternalError);
            }
        }
    </script>
</body>

ReferenceError.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReferenceError</title>
    <style>
        * {
            font-size: 28px;
        }
    </style>
</head>

<body>

    <button type="button" id="btnEx">执行</button>

    <script>
        btnEx.onclick = function () {
            try {
                var a = xyz;
            } catch (e) {
                console.log('e instanceof ReferenceError:', e instanceof ReferenceError);
                console.log('e.message:', e.message);
                console.log('e.name:', e.name);
                console.log('e.fileName:', e.fileName);
                console.log('e.lineNumber:', e.lineNumber);
                console.log('e.columnNumber:', e.columnNumber);
                console.log('e.stack:', e.stack);
            }
        }
    </script>
</body>

SyntaxError

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SyntaxError</title>
    <style>
        * {
            font-size: 28px;
        }
    </style>
</head>

<body>

    <button type="button" id="btnEx">不能捕获的</button>

    <script>


        window.onerror = function (message, source, lineno, colno, error) {
            var string = msg.toLowerCase();
            var substring = "script error";
            if (string.indexOf(substring) > -1) {
                alert('Script Error: See Browser Console for Detail');
            } else {
                var message = [
                    'Message: ' + msg,
                    'URL: ' + url,
                    'Line: ' + lineNo,
                    'Column: ' + columnNo,
                    'Error object: ' + JSON.stringify(error)
                ].join(' - ');

                console.log(message);
            }
        }

        window.addEventListener("error", function(){
            console.log('Script Error: See Browser Console for')
        }, true);

        btnEx.onclick = function () {
            try {
                var hhhh bbbb;

            } catch (e) {
                console.log('e.message:', e.message);
            }
        }
    </script>
</body>

AggregateError.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AggregateError</title>
</head>

<body>
    <script>
        Promise.any([
            Promise.reject(new Error("error 1")),
            Promise.reject(new Error("error 2")),
        ]).catch(e => {
            console.log("e instanceof AggregateError:", e instanceof AggregateError);
            console.log("e.message:", e.message);
            console.log("e.name", e.name);
            console.log("e.errors", e.errors);
        });
    </script>
</body>

</html>

自定义异常类型

class CustomError extends Error {
  constructor(foo = 'bar', ...params) {
    super(...params)

    // if (Error.captureStackTrace) {
    //   Error.captureStackTrace(this, CustomError)
    // }

    this.name = 'CustomError'
    this.foo = foo
    this.date = new Date()
  }
}

function trace() {
  try {
    throw new CustomError('baz', 'bazMessage')
  } catch (e) {
    console.log("是否是MyError类型错误:", e instanceof CustomError);
    console.log("e.message:", e.message);
    console.log("e.name", e.name)
    console.log("e.foo", e.foo)
    console.log("e.date", e.date)
    console.log("e.stack:", e.stack);
  }
}

function b() {
  trace();
}

function a() {
  b();
}

a();

rejectionhandled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>rejectionhandled</title>
</head>

<body>
    <div>promise 错误</div>

    <script>
        window.addEventListener("unhandledrejection", function (e) {
            //阻断异常继续抛出
            e.preventDefault();
            console.log("unhandledrejection捕获到promise错误的原因是：", e.reason);
            console.log("unhandledrejection Promise 对象是：", e.promise);
            return true;
        });
        //promise异常被处理了
        window.addEventListener('rejectionhandled', e => {
             // rejected的原因
            console.log('rejectionhandled:', e.reason);
        })

        const p1 = new Promise((resolve, reject) => {
            reject("promise error1");
        });

        setTimeout(() => {
            p1.catch((e) => {
                console.log("catch捕获到promise1 错误:", e);
            })
        }, 1000)

    </script>
</body>

</html>

unhandledrejection

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>unhandledrejection</title>
    </head>

    <body>
        <div>promise 错误</div>

        <script>
            window.onerror = function (message, url, line, column, error) {
                console.log("window.onerror 捕获到错误:", message, "==line:", line, "==column:", column, "==error:", error);
            };

            window.addEventListener("error", function (e) {
                console.log("window.addEventListener:", e, "==e.error:", e.error);
            });

            window.addEventListener("unhandledrejection", function (e) {
                //阻断异常继续抛出
                e.preventDefault();
                console.log("unhandledrejection捕获到promise错误的原因是", e.reason);
                console.log("Promise 对象是", e.promise);
                return true;
            });

            new Promise((resolve, reject) => {
                reject("promise error1");
            });

            new Promise((resolve) => {
                resolve();
            }).then(() => {
                throw new Error("promise error2");
            });

            try {
                new Promise((resolve) => {
                    resolve();
                }).then(() => {
                    throw new Error("promise error3");
                });
            } catch (e) {
                console.log("try catch:", e);
            }
        </script>
    </body>
</html>

图片描述

【备战春招】第7天 破解JavaScript高级玩法 第十四讲

课程内容：

课程收获：

14.1 心得：

【备战春招】第7天破解JavaScript高级玩法第十四讲