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

1. 오류 분류

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

2. 오류 처리

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

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

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 이벤트 핸들러를 지원하는 유일한 개체는 아닙니다. 또한 이미지 개체에 대한 지원도 제공합니다. 파일이 존재하지 않는 등의 이유로 이미지를 성공적으로 로드하지 못한 경우 이미지에서 오류 이벤트가 트리거됩니다.



코드 복사

코드는 다음과 같습니다. 스크립트를 통해 이벤트 처리 기능을 할당합니다. 이미지의 src 속성을 설정하기 전에 페이지가 완전히 로드될 때까지 기다려야 합니다. 예:

코드 복사

코드는 다음과 같습니다.

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

1.3 구문 오류 처리

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

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

>

코드 복사


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

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

//code

}]


예:




코드 복사

코드는 다음과 같습니다.

try { window.openFile1() alert("openFile1 메서드가 성공적으로 호출되었습니다."); >} catch (예외) { alert("예외가 발생했습니다! "); } finally { alert("try..catch 테스트 종료!"); }

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