찾다
웹 프론트엔드JS 튜토리얼JavaScript 오류 처리 메커니즘 소개(예제 포함)

이 글은 JavaScript 오류 처리 메커니즘을 소개합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

캡슐화한 도구 함수에서 매개변수가 전달되지 않거나 잘못된 유형의 매개변수가 전달되면 경고로 일부 오류가 발생합니다. 프레임워크가 정상적으로 사용되지 않으면 오류도 발생합니다. 오류에 대해 아무것도 모르면 디버깅할 수 없습니다. 위의 내용을 바탕으로 오류 처리 메커니즘을 이해하는 것이 필요합니다.

다음은 작성자의 요약입니다. 틀린 부분이 있으면 지적해주세요.

Error constructor
JavaScript 사양에는 총 8개의 오류 유형 생성자가 있습니다.
Error -- 오류 개체
SyntaxError -- 구문 분석 중 구문 오류
TypeError -- 유효한 유형에 속하지 않습니다.
ReferenceError -- 잘못된 참조
RangeError -- 숫자 값이 유효한 범위를 벗어남
URIError -- URI 인코딩 구문 분석 중 오류
EvalError -- 평가 함수 호출 중 오류
InternalError -- Javascript 엔진 내부 오류 예외 발생, "재귀가 너무 많습니다"

그 중 두 가지는 특별히 설명:
EvalError 호출 eval 함수가 잘못되어 더 이상 사용되지 않습니다. 이전 버전과의 호환성을 위해 더 낮은 버전을 계속 사용할 수 있습니다.
InternalError는 재귀가 너무 깊으면 오류를 발생시킵니다. 이는 비표준 방법이며 프로덕션 환경에서는 비활성화됩니다.
상속 관계
Error는 오류의 기본 클래스입니다. 오류 클래스. ES6에서 제공하는 객체인 getPrototypeOf()를 사용하여 클래스가 다른 클래스를 상속하는지 확인할 수 있습니다.

console.log(Object.getPrototypeOf(SyntaxError) === Error);    // true
console.log(Object.getPrototypeOf(TypeError) === Error);   // true
console.log(Object.getPrototypeOf(RangeError) === Error);   // true
console.log(Object.getPrototypeOf(URIError) ===  Error);   // true
console.log(Object.getPrototypeOf(EvalError) === Error);   // true
console.log(Object.getPrototypeOf(ReferenceError) === Error); // true

각 오류 유형의 사용법과 오류 시나리오에 대해 이야기해보겠습니다.

Error
오류 객체는 Error 생성자를 통해 생성될 수 있습니다. 런타임 오류가 발생하면 Error 인스턴스 객체가 발생합니다.
구문: new Error([메시지])
매개변수:

message 可选,错误描述信息。

오류 발생
throw 문을 사용하여 예외 발생
throw new Error('여기에 오류 메시지가 발생합니다')
실행 후 표시됩니다. 콘솔 인쇄 출력:
Uncaught Error: 여기에 던져진 오류 메시지는
Note: 예외를 발생시키기 위해 throw를 사용한 후에는 후속 코드가 더 이상 실행되지 않습니다.

Catch 오류
try{}catch(){} 문

try{
   throw new Error('这里抛出的是错误信息')
 }
 catch(err){
   alert(err.name + ' '+ err.message)
   }

을 통해 이 오류를 캡처할 수 있습니다. 속성 설명:

 当使用new Error创建错误实例后,会有两个属性:

let e = new Error('여기에 오류 메시지가 표시됩니다');
name 속성은 오류 종류입니다. 이때 오류 메시지는 '여기에 오류 메시지가 발생합니다'

SyntaxError

파싱 과정에서 구문 오류입니다. . 이 유형에서 발생하는 오류는 다음과 같습니다. 작성 시 문법 오류가 많이 발생합니다. 예:

let n = 11;   // Uncaught SyntaxError: Invalid or unexpected token
let str = "hel"lo" // Uncaught SyntaxError: Unexpected identifier
let 123Var = 'hi' // Uncaught SyntaxError: Invalid or unexpected token

브라우저에서 실행할 때 문법 오류가 너무 많아서 하나씩 나열하지는 않습니다. 콘솔은 오류를 발생시키고 어떤 줄인지 알려 주므로 디버거가 더 편리합니다. 하지만 오류 유형을 SyntaxError로 이해하고 그에 따른 오류 메시지를 이해해야 오류를 쉽게 수정할 수 있습니다.


TypeError

은(는) 유효한 유형이 아닙니다. 이런 종류의 오류는 주어진 유형이 필수 유형이 아니므로 작동 불가능하게 되고 유형 오류가 발생함을 의미합니다.
변수 또는 매개변수가 예상된 유형이 아닙니다.
변수 또는 매개변수가 예상된 유형이 아닙니다.
예를 들어
new 연산자 뒤에는 함수가 와야 하며 주어진 것은 함수, 유형이 아닙니다. 오류가 발생합니다

let fn = 'hello';
new fn;

오류 발생:

Uncaught TypeError: fn은 생성자가 아닙니다
객체에 존재하지 않는 메서드 호출

let obj = {};
obj.fn()

오류 발생:

Uncaught TypeError: obj.fn은 a가 아닙니다. function
물론 함수 유형을 캡슐화할 때 전달된 매개변수를 강제로 지정할 수도 있습니다. 그렇지 않으면 유형 오류가 발생합니다.

function flatten(arr){
if( !Array.isArray(arr) )
{
       throw new TypeError('传入参数不是数组')   
}    
}
flatten('test');

수신 매개변수가 배열이 아닌 경우 다음과 같은 사용자 정의 유형 오류가 발생합니다.

Uncaught TypeError: 수신 매개변수가 배열이 아닙니다

ReferenceError

잘못된 참조입니다.

존재하지 않는 변수를 참조했습니다


console.log(a);

오류 발생

Uncaught ReferenceError: a가 정의되지 않았습니다.
할당할 수 없는 데이터에 변수를 할당합니다
이 실수는 메소드를 호출한 후 if 문에서 자주 발생합니다. 판단을 내리면 비교 연산자 ==는 할당 연산자 =로 작성됩니다. 예를 들어 문자열의 첫 번째 문자가 지정된 문자인지 판단하려면

let str = 'hello';
if( str.charAt(0) = 'h' ){
   console.log('第一个字符为h');
   }

오류가 발생합니다.

Uncaught ReferenceError: Invalid left-hand 할당 중
RangeError
값이 유효한 범위를 벗어났습니다. 일부 메서드에서는 전달된 값이 특정 범위 내에 있어야 합니다. 그렇지 않으면 범위를 벗어난 오류가 발생합니다.
배열 생성 시 전달된 길이가 0

let arr = new Array(-1)

오류 발생:

Uncaught RangeError: 잘못된 배열 길이
repeat 메소드가 지정된 문자열을 반복하고 반복 횟수가 0

let str = 'hello';
str.repeat(-1)

미만이면 오류가 발생합니다. :

Uncaught RangeError: 잘못된 카운트 값

URIError

URI 인코딩 처리 중 오류가 발생했습니다. 함수 매개변수가 올바르지 않습니다. 주로 6개 함수인 encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent(), escape() 및 unescape()입니다.
예:

decodeURIComponent('%');
decodeURI('%2')

오류 발생:

Uncaught URIError: URI Malformed

사용자 정의 오류 유형

때때로 오류 유형을 사용자 정의하려면 생성자를 사용자 정의한 다음 프로토타입 상속이 오류를 상속하도록 해야 합니다. 프로토타입 .

function MyErrorType(message){
this.message = message || '错误';
this.name = 'MyErrorType';
this.stack = (new Error()).stack;  // 错误位置和调用栈
}
MyErrorType.prototype = Object.create(Error.prototype);
MyErrorType.prototype.constructor = MyErrorType;
throw new MyErrorType('自定义错误类型抛出错误')

关于调用的错误栈信息
提供的错误的跟踪功能,以什么样的调用顺序,在哪个文件的哪一行捕获到这个错误。
例如以下调用:

 function trace() {
  try {
        throw new Error('myError');
  }
  catch(e) {
        console.log(e.stack);
  }
  }
function b() {
trace();
}
function a() {
b(3, 4, '\n\n', undefined, {});
}
a('first call, firstarg');

错误信息为:
Error: myError
  at trace (:3:14)
  at b (:10:6)
  at a (:13:6)
  at :15:4
以上为抛错的构造函数的总结,如有误之处欢迎扶正。

위 내용은 JavaScript 오류 처리 메커니즘 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 segmentfault思否에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전