> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 고급 프로그래밍 읽기 노트(20) js 오류 처리_javascript 기술

JavaScript 고급 프로그래밍 읽기 노트(20) js 오류 처리_javascript 기술

WBOY
풀어 주다: 2016-05-16 17:50:50
원래의
1170명이 탐색했습니다.
1. 오류 분류

1. 구문 오류: 구문 분석 오류라고도 하며 기존 언어를 컴파일하는 동안 및 JavaScript에서 해석하는 동안 발생합니다. 이러한 오류는 코드의 예상치 못한 문자로 인해 직접적으로 발생하며, 직접 컴파일/해석할 수 없습니다. 구문 오류가 발생하면 코드 실행을 계속할 수 없습니다. JavaScript에서는 동일한 스레드 내의 코드만 구문 오류의 영향을 받습니다. 다른 스레드 및 기타 외부 참조 파일의 코드는 오류가 포함된 코드에 의존하지 않는 경우 계속 실행될 수 있습니다.
 2. 런타임 오류: 예외라고도 합니다(예외, 컴파일 중/인터프리터 후). 이 시점에서 문제는 코드 구문에 있는 것이 아니라 경우에 따라 불법적인 작업을 완료하려고 시도하는 데 있습니다. 예외는 발생한 스레드에만 영향을 미치며, 다른 JavaScript 스레드는 계속해서 정상적으로 실행될 수 있습니다.

2. 오류 처리


JavaScript는 오류를 처리하는 두 가지 방법, 즉 BOM의 onerror 이벤트 핸들러 메서드와 ECMAScript의 try...catch 메서드를 제공합니다.
1. Onerror 이벤트 처리 기능
JavaScript가 오류를 처리하도록 지원하는 데 사용되는 첫 번째 메커니즘입니다. 페이지에서 예외가 발생하면 창 개체에서 오류 이벤트가 트리거됩니다. 예:

코드 복사 코드는 다음과 같습니다.


onerror 예


body>




위 코드에서는 페이지가 로드될 때 존재하지 않는 함수를 호출하려고 하면 예외가 발생합니다. "오류가 발생했습니다."라는 오류 메시지가 나타납니다. 그러나 브라우저의 오류 메시지도 표시됩니다. 브라우저에서 이를 숨기는 방법은 무엇입니까? onerror 메소드에서 true를 반환하면 됩니다.




코드 복사
코드는 다음과 같습니다.



1.1 오류 메시지 가져오기
onerror 핸들러는 오류의 정확한 성격을 결정하기 위해 세 가지 유형의 정보를 제공합니다.
i) 오류 메시지 - 주어진 오류에 대해 , 브라우저는 동일한 정보를 표시합니다
ii) URL - 오류가 발생한 파일
iii) 줄 번호 - 해당 URL에서 오류가 발생한 줄 번호입니다.




코드 복사
코드는 다음과 같습니다. window.onerror = function(sMessage, sUrl , iLine) { alert("오류가 발생했습니다! " sMessage "nURL:" sUrl "nLine 번호:" iLine);
return true;
}



 1.2 이미지 로딩 오류
창 개체 It onerror 이벤트 핸들러를 지원하는 유일한 개체는 아닙니다. 또한 이미지 개체에 대한 지원도 제공합니다. 파일이 존재하지 않는 등의 이유로 이미지를 성공적으로 로드하지 못한 경우 이미지에서 오류 이벤트가 트리거됩니다.



코드 복사

코드 복사

코드는 다음과 같습니다.
이미지 오류 테스트




참고: 창 개체의 onerror 이벤트 핸들러와 달리 이미지의 onerror 이벤트에는 추가 정보에 대한 매개변수가 없습니다.

1.3 구문 오류 처리

onerror 이벤트 핸들러는 예외를 처리할 수 있을 뿐만 아니라 구문 오류도 처리할 수 있으며, 오직 그것만이 이를 처리할 수 있습니다.
우선 이벤트 핸들러는 페이지에 나타나는 첫 번째 코드여야 합니다. 이벤트 핸들러를 설정하기 전에 구문 오류가 발생하면 이벤트 핸들러가 쓸모가 없기 때문입니다. 구문 오류로 인해 코드 실행이 완전히 중단될 수 있다는 점을 기억하세요. 예:
코드 복사 코드는 다음과 같습니다.

>
onError 예<br><script type="text/javascript">alert("구문 오류."; <BR>window.onerror = function (sMessage , sUrl, iLine){ <BR>alert("오류가 발생했습니다:n" sMessage "nURL:" sUrl "nLine 번호:" iLine ) <BR>return true; ;/script> <BR></head> <BR><body onload="nonExistentFunction()"> <BR></html> 🎜>눈에 띄기 때문입니다. 표시된 코드 줄(오류 구문 포함)은 onerror 이벤트 핸들러가 전달되기 전에 나타나므로 브라우저는 오류를 직접 보고하고 오류 뒤의 코드는 더 이상 해석되지 않습니다. 이미 종료됨) 로드 이벤트가 실행될 때 nonExistentFunction()이 호출되면 브라우저도 이 오류를 보고합니다. 이 페이지를 다시 작성하고 구문 오류 앞에 onerror 이벤트 핸들러 할당을 배치하면 두 가지 경고가 발생합니다. 상자가 나타납니다. 하나는 구문 오류를 표시하고 다른 하나는 표시 예외를 표시하지만 테스트 결과는 여전히 동일하며 두 개의 오류가 보고되고 onerror 이벤트의 정보가 표시되지 않습니다. <BR><BR> onerror 이벤트 핸들러를 사용하는 것은 BOM이라는 점입니다. 따라서 브라우저마다 이 이벤트를 사용하여 오류를 처리하는 방식에는 분명한 차이가 있습니다. 예를 들어 IE에서 오류 이벤트가 발생하면 일반 코드가 계속 실행됩니다. Mozilla에서는 정상적인 코드 실행이 종료되고 오류가 발생하기 전의 모든 변수와 데이터가 삭제됩니다. 2. try...catch 메소드 <BR><BR> ECMPScript 제3판에서는 try...catch 문을 소개합니다. 기본 구문은 다음과 같습니다. <BR></script>



코드 복사


코드는 다음과 같습니다. 다음과 같습니다:

try{ //code [break;] } catch([예외]) { //code [break; ] } [finally{
//code
}]


예:




코드 복사

코드는 다음과 같습니다.


Java와 달리 ECMAScript 표준은 try.. .catch 문 JavaScript는 유형이 약한 언어이고 catch 절에 특정 예외 유형을 지정할 수 있는 방법이 없기 때문에 catch 문은 하나만 있을 수 있습니다. 오류 유형이 무엇이든 동일한 방식으로 처리됩니다. catch 문은 여러 개 추가할 수 있지만 Mozilla에서만 사용할 수 있으므로 권장하지 않습니다.

마지막으로 예외 발생 여부에 관계없이 실행되는 코드를 포함하는 데 사용됩니다. 열린 링크를 닫고 리소스를 해제하는 데 유용합니다.

 2.1 중첩된 try...catch 문

try...catch 문의 catch 절에서도 오류가 발생합니다. 시간이 지나면 중첩된 try....catch 문을 사용할 수 있습니다. 예:



코드 복사


코드는 다음과 같습니다.


try { } >eval("a b"); catch(Exception) { alert("catch 절에서 오류가 발생했습니다!") } } 드디어{ alert("완료") }


2.2 오류 객체

오류가 발생하면 JavaScript에는 오류를 발생시키는 Error 기본 클래스가 있습니다. 여기에는 두 가지 특성이 있습니다.
i) 이름 - 오류 유형을 나타내는 문자열
ii) 메시지 - 실제 오류 메시지
Error 개체의 이름은 해당 클래스에 해당하며 다음 값 중 하나일 수 있습니다. 하나:
EvalError: eval() 함수에서 오류가 발생했습니다.
RangeError: 숫자 값이 JavaScript가 나타낼 수 있는 범위를 초과했습니다.
ReferenceError: 잘못된 참조가 사용되었습니다. eval() 함수 호출에서 구문 오류가 발생했으며 다른 오류는 브라우저에서 보고되며 try...catch로 처리할 수 없습니다.
TypeError: 변수 유형이 예상되지 않습니다. encodeURI 또는 ​​decodeURI 함수 오류에서 발생했습니다.

 2.3 오류 유형 확인

각 try...catch 문에는 하나의 catch 절만 있을 수 있지만 발생한 오류 유형을 확인하는 두 가지 주요 방법이 있습니다. 첫 번째는 Error 개체의 name 속성을 사용합니다.


try {
eval("a b");
} catch(oException) {
if (oException.name = "SyntaxError") {
alert("SyntaxError 발생!");
} else {
alert("또 다른 오류가 발생했습니다!");
}
}


두 번째는 instanceof 연산자를 사용하고 다른 오류 클래스 이름을 사용합니다.


try {
eval("a b ");
} catch(oException) {
if (oException instanceof SyntaxError) {
alert("SyntaxError가 발생했습니다!");
} else {
alert("다른 오류가 발생했습니다! ");
}
}


2.4 예외 던지기

ECMAScript 제3판에서 소개되었으며 목적에 맞게 예외를 던지는 데 사용됩니다. 던져지는 오류 객체는 문자열, 숫자, 부울 값일 수 있으며 실제 객체도 오류 객체를 던질 수 있습니다(해당 생성자는 하나의 함수, 오류 정보만 가집니다). 예:


throw new Error("An error 발생!") ; 


개발자가 던진 오류와 브라우저 자체에서 던진 오류는 try...catch에 캡처됩니다. 예:


function addTwoNumber(a, b ) {
if (arguments.length < 2) {
throw new Error("두 개의 숫자를 전달해야 합니다!")
}
}
try {
result = addTwoNumber(90 );
} catch(oException) {
if (oException instanceof SyntaxError) {
alert("SyntaxError:" oException.message)
} else if (oException instanceof Error ){
Alert(oException.message);
}
}



3. 디버깅 기술

오늘날의 브라우저는 대부분의 경우 자동으로 디버깅 도구를 가져오는 것만으로도 충분합니다. 또한 IE에서는 IETest를, FireFox에서는 FireBug를 사용할 수도 있습니다.

저자: Artwl
출처: http://artwl.cnblogs.com
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿