이전 단어
웹 애플리케이션 개발에 오류 처리가 중요합니다. 사전에 가능한 오류를 예측할 수 없으며 복구 전략을 미리 채택 할 수 없으므로 사용자 경험이 좋지 않을 수 있습니다. JavaScript 오류로 인해 웹 페이지를 사용할 수 없으므로 개발자로서 언제, 왜, 어떻게 될지 알아야합니다. 이 기사는 오류 처리 메커니즘을 JavaScript의 상세하게 소개합니다.
오류 객체
오류 객체는 오류 정보가 포함 된 객체이며 JavaScript의 기본 객체입니다. 코드 구문 분석 또는 실행 중에 오류가 발생하면 JavaScript 엔진은 자동으로 오류 객체의 인스턴스를 생성하고 던지면 오류가 발생하는 경우 전체 프로그램이 중단됩니다.
Console.log (t); // upphed referenceError : t는 정의되지 않았습니다
ECMA-262 오류 객체에는 메시지와 이름의 두 가지 속성이 포함되어 있습니다. 메시지 속성은 오류 메시지를 저장하고 이름 속성은 오류 유형을 저장합니다.
// 일반적으로 Try-CATCH 문은 오류 오류에 사용됩니다. {t;} catch (ex) {console.log (예 : message); // t는 console.log (ex.name); // referenceError}입니다.브라우저는 또한 오류 객체의 속성을 확장하고 다른 관련 정보를 추가했습니다. 그중에서도 브라우저 제조업체가 가장 많이 구현 한 것은 스택 트레이스 정보를 나타내는 스택 속성입니다 (Safari는 지원하지 않음).
{t;} catch (ex) {console.log (ex.stack); //@file : // d : /wamp/www/form.html : 12 : 2} 시도하십시오.물론 Error () 생성자를 사용하여 오류 객체를 생성 할 수 있습니다. 메시지 매개 변수가 지정된 경우 오류 객체는 메시지 속성으로 사용합니다. 지정되지 않은 경우 사전 정의 된 기본 문자열을 속성 값으로 사용합니다.
새 오류 (); 새 오류 (메시지); // 일반적으로 Throw 문을 사용하여 Throw Throw New Error ( 'Test'); // ucted 오류 : TestThrow New Error (); // uppather 오류
function userError (message) {this.message = message; this.name = "userError";} userError.prototype = new Error (); userError.prototype.constructor = userError; 새 userError ( "errormessage"); // uncught userError : errormessage오류 () 생성자가 새 연산자를 사용하지 않고 직접 함수처럼 호출되면 동작은 새 연산자가 호출 될 때와 동일합니다.
오류 (); 오류 (메시지); Throw Error ( 'test'); // ucted 오류 : TestThrow error (); // uppher 오류
에러 객체에는 toString () 메소드가있어 오류 객체의 메시지 속성을 반환합니다.
var test = new Error ( 'testerror'); console.log (test.toString ()); // '오류 : TestError'
오류 유형
코드 실행 중에 발생할 수있는 여러 유형의 오류가 있습니다. 각 오류는 해당 오류 유형을 가지며 오류가 발생하면 해당 유형의 오류 객체가 발생됩니다. ECMA-262는 다음 7 가지 오류 유형을 정의합니다.
errorevalerror (Evalerror) RangeError (RangeError) 참조 오해 (참조 오해) syntaxError (syntaxError) TypeError (TypeError) Urierror (urierror)
여기서 오류는 기본 유형이고 다른 오류 유형은이 유형에서 상속됩니다. 따라서 모든 오류 유형은 동일한 속성 세트를 공유합니다. 오류 유형 오류는 드물며 브라우저에서도 던져집니다. 이 기본 유형의 주요 목적은 개발자가 사용자 지정 오류를 던지는 것입니다.
Evalerror (평가 오류)】
평가 함수가 올바르게 실행되지 않으면 평가 오류 오류가 발생합니다. 이 오류 유형은 더 이상 ES5에 나타나지 않지만 이전 코드와의 호환성을 보장하기 위해 계속 유지됩니다.
【Rangeerror (Rangeerror)】
값이 해당 범위를 초과 할 때 RangeError 유형의 오류가 트리거되고, 주로 배열 길이 범위를 초과하고 숫자 값 범위를 초과하는 것을 포함하여 해당 범위를 초과 할 때 트리거됩니다.
새 배열 (-1); // upphed RangeError : 유효하지 않은 배열 길이 나프 어레이 (number.max_value); // uppherged rangeerror : 유효하지 않은 배열 길이 (1234) .Toexponential (21); // uppher rangeerror : toexponection (1234) 사이에 있어야합니다. toexponential () 인수는 0과 20 사이 여야합니다
【참조 오류 (참조 오류)】
존재하지 않는 변수 또는 LValue 유형 오류를 참조 할 때 참조 오류가 트리거됩니다.
a; // unchatch referenceError : a는 정의되지 않음 1 ++; // uppher referenceError : postfix 작업에서 무효 왼쪽 표현식
SyntaxError (SyntaxError)】
구문 규칙이 충족되지 않으면 구문이 발생합니다 (구문 오류)
// 변수 이름 오류 var 1a; // upcted syntaxError : 예기치 않은 번호 // Bracket Console이 누락 된 'Hello'); // uncught SyntaxError : Unexpected String
【TypeError (유형 오류)】
예기치 않은 유형이 변수에 저장되거나 존재하지 않는 메소드에 액세스 할 때 유형 에러 유형 오류가 발생합니다. 오류의 원인은 다양하지만 궁극적으로는 특정 유형의 작업을 수행 할 때 변수 유형이 요구 사항을 충족하지 않기 때문입니다.
var o = new 10; // uppher typeerror : 10은 생성체가 아니다 ( 'name'in true); // uppher typeerror : truefunction.prototype.tostring.call ( 'name')에서 'name'을 검색하기 위해 '연산자'에서 사용할 수 없습니다.
【Urierror (URI 오류)】
Urierror는 URI 관련 기능의 매개 변수가 잘못되었을 때 발생하는 오류입니다. 주로 encodeuri (), decodeuri (), encodeUricomponent (), decodeUricomponent (), Escape () 및 unescape ()의 6 가지 함수가 포함됩니다.
decodeuri ( '%2'); // urierror : uri 기형
오류 이벤트
Try-Catch를 통해 처리되지 않은 오류는 Window 개체의 오류 이벤트가 트리거됩니다.
오류 이벤트는 오류 메시지, 오류가있는 URL 및 줄 번호의 세 가지 매개 변수를받을 수 있습니다. 대부분의 경우 URL이 문서의 위치 만 제공하기 때문에 오류 메시지 만 유용하며 줄 번호는 임베디드 JavaScript 코드 또는 외부 파일에서 발생할 수있는 코드 행을 나타냅니다.
오류 이벤트 핸들러를 지정하려면 DOM0 레벨 기술을 사용하거나 DOM2 레벨 이벤트의 표준 형식을 사용할 수 있습니다.
// dom0 레벨 Window.onerror = function (메시지, URL, line) {alert (message);} // dom2 레벨 Window.AdDeventListener ( "error", function (message, url, line) {alert (message);});브라우저가 표준 오류 메시지를 표시하는지 여부는 OnError의 리턴 값에 따라 다릅니다. 반환 값이 False 인 경우 콘솔에 오류 메시지가 표시됩니다. 반환 값이 참이면 표시되지 않습니다.
// 콘솔에 오류 메시지 wind return false;} a; // 콘솔에는 오류 메시지가 표시되지 않습니다. 진실을 반환하십시오;} a;
이 이벤트 핸들러는 브라우저보고 오류를 피하기위한 마지막 방어선입니다. 이상적으로는 가능할 때마다 사용해서는 안됩니다. Try-Catch 문을 적절하게 사용할 수있는 한 브라우저에 오류가 발생하지 않으며 오류 이벤트가 트리거되지 않습니다.
이미지는 오류 이벤트도 지원합니다. 이미지의 SRC 특성의 URL이 인식 된 이미지 형식을 반환 할 수없는 한 오류 이벤트가 트리거됩니다. 현재 오류 이벤트는 DOM 형식을 따르고 이미지를 대상으로 타겟팅하는 이벤트 객체를 반환합니다.
이미지가로드되면 경고 상자가 나타납니다. 오류 이벤트가 발생하면 이미지 다운로드 프로세스가 종료되었으므로 다시 다운로드 할 수 없습니다.
var image = new image (); image.src = 'smilex.gif'; image.onerror = function (e) {console.log (e);}진술을 던지고 오류를 던집니다
던지기 문은 오류를 던지는 데 사용됩니다. 오류가 발생하면 Throw 문에 값을 지정해야합니다. 이 값은 어떤 유형입니까? 요구 사항이 없습니다.
[참고] 오류를 던지는 프로세스가 차단되고 후속 코드가 실행되지 않습니다.
던지기 12345; 'Hello World'를 던지십시오; Thring True; Throw {Name : 'JavaScript'};Throw 문을 사용하여 수동으로 오류 객체를 던질 수 있습니다.
새로운 오류 ( '나쁜 일이 일어났다'); 새로운 구문 서서를 던지십시오 ( '나는 당신의 구문을 좋아하지 않습니다. referenceError ( '당신은 당신의 참조를 올바르게 인용하지 않았다');
프로토 타입 체인을 사용하면 오류를 상속하여 사용자 정의 오류 유형을 만들 수 있습니다 (프로토 타입 체인은 6 장에 도입 됨). 이 시점에서 새로 생성 된 오류 유형의 이름 및 메시지 속성을 지정해야합니다.
브라우저는 다른 오류 유형과 마찬가지로 오류에서 상속 된 사용자 정의 오류 유형을 취급합니다. 사용자 정의 오류를 만드는 것은 던지고 오류를 잡아 브라우저 오류와 다르게 취급하려는 경우 유용합니다.
함수 customerRor (메시지) {this.name = 'customerRor'; this.message = message;} customerRor.prototype = new Error (); 새로운 CustomerRor를 던지십시오 ( '내 메시지');던지기 명세서가 발생하면 코드는 즉시 실행 중지됩니다. 이 코드는 Try-Catch 문이 던진 값을 캡처하는 경우에만 계속 실행됩니다.
더 자세한 설명은 다음과 같습니다. 예외가 발생하면 JavaScript 통역사는 현재 실행중인 논리를 즉시 중지하고 인근 예외 핸들러로 이동합니다. 예외 핸들러는 Try-Catch 문의 Catch Clause에 작성됩니다. 예외를 던지는 코드 블록에 관련 어획 조항이없는 경우 통역사는 상위 레벨 폐쇄 코드 블록을 확인하여 관련 예외 처리기가 있는지 확인합니다. 예외 핸들러가 발견 될 때까지. 예외를 던지는 함수가 트리 캐치 문을 처리하지 않으면 예외는 함수를 호출하는 코드까지 전파됩니다. 이러한 방식으로, 예외는 JavaScript 방법의 어휘 구조와 통화 스택을 따라 위쪽으로 전파됩니다. 예외 핸들러가 없으면 JavaScript는 예외를 프로그램 오류로 처리하여 사용자에게보고합니다.
캐치 문을 시도하고 캐치 오류를 시도하십시오
ECMA-262 Edition 3은 오류를 잡고 처리하는 데 사용되는 JavaScript의 예외를 처리하는 표준 방법으로 Try-Catch 문을 소개합니다.
그 중에서 시도 절은 처리 해야하는 예외가있는 코드 블록을 정의합니다. 캐치 절은 시도 절을 따릅니다. 시도 블록 어딘가에 예외가 발생하면 캐치 내부의 코드 로직이 호출됩니다. Catch 절은 청소 코드가 배치되는 마침내 블록이 이어집니다. 시도 블록에서 예외가 발생하는지 여부에 관계없이, 마지막 블록 내부의 논리는 항상 실행됩니다. 캐치와 마지막으로 선택 사항이지만 시도 절은 두 가지 중 하나 이상이 완전한 진술을 형성해야합니다.
모든 시도/캐치/마침내 문장 블록은 곱슬 괄호로 둘러싸여 있어야합니다. 여기에 중괄호가 필요합니다. 조항에 진술이 하나만 있더라도 곱슬 괄호는 생략 할 수 없습니다.
시도 {// 일반적으로 여기서 코드는 문제를 일으키지 않지만 때로는 예외가 Throw 문에 의해 직접 던져 지거나 메소드를 호출하여 간접적으로 던져 지거나 간접적으로 던져지면 (e) {// 시도 문장에 의해 예외가 발생하는 경우에만, 여기서 코드가 실행될 수 있습니다. 또한 Throw 문으로 예외를 다시 줄 수 있습니다.} 마지막으로 {// try 문이 예외를 던지는 지 여부에 관계없이, 논리가 항상 실행되며, Try 문을 종료하는 방법은 다음과 같습니다. 정상적으로 종료하십시오. 문의 마지막 진술을 실행 한 후 // 2. 휴식을 통해 종료, 계속 또는 반환 명령문 // 3. 예외를 던지면, 예외는 Catch Clause // 4에 의해 잡힌다. 예외를 던지십시오. 예외는 잡히지 않고 계속 위로 전파합니다}일반적으로 Try Statement 블록에 오류를 던질 수있는 모든 코드를 넣고 오류 처리에 사용되는 코드를 캐치 블록에 넣습니다.
시도 블록 오류의 코드가 발생하면 코드 실행 프로세스가 즉시 종료되고 캐치 블록이 실행됩니다. 현재 캐치 블록은 오류 메시지가있는 객체를받습니다. 이 개체에 포함 된 실제 정보는 브라우저마다 다르지만 공통은 오류 메시지를 저장하는 메시지 속성이 있다는 것입니다.
[참고] 오류 객체의 이름을 지정하십시오. 비우면 구문 오류 가보고됩니다.
{q;} catch (error) {alert (error.message); // q가 정의되지 않음} // upchael yought (unexpected token) try {q;} catch () {alert (error.message);}Catch는 시도 코드 블록에서 던진 값을 나타내는 매개 변수를 허용합니다.
함수 ThrowIT (예외) {try {Throw Exception; } catch (e) {console.log ( '잡힌 :'+ e); }} trashit (3); // 잡힌 : 3throwit ( 'hello'); // 잡힌 : hellothrowit (새로운 오류 ( '오류가 발생한')); // 잡힌 : 오류가 발생했습니다.캐치 코드 블록이 오류를 잡으면 프로그램이 중단되지 않으며 일반 프로세스에 따라 계속 실행됩니다.
{trash "error";} catch (e) {console.log (111);} console.log (222); // 111 // 222를 시도하십시오다양한 유형의 오류를 잡으려면 캐치 코드 블록에 판단 문을 추가 할 수 있습니다.
try {foo.bar ();} catch (e) {if (e instanceof evalerror) {console.log (e.name + ":" + e.message); } else if (e instanceof RangeError) {console.log (e.name + ":" + e.message); } // ...}마지막 절은 Try-Catch 문에서 선택 사항이지만, 마지막 절이 사용되면 코드는 무엇이든지 실행됩니다. 다시 말해, Try Statement 블록의 모든 코드는 정상적으로 실행되며 최종적으로 조항이 실행됩니다. 오류로 인해 캐치 문 블록이 실행되면 최종 조항이 여전히 실행됩니다. 코드에 최종적으로 조항이 포함되어있는 한, 시도 또는 캐치 명령문 블록에 어떤 코드가 포함되어 있더라도, 심지어 리턴 명령문에도 마침내 조항의 실행은 방지되지 않습니다.
// 캐치 명령문 블록이 없기 때문에 오류가 잡히지 않습니다. 최종 코드 블록을 실행 한 후 프로그램은 오류가 발생하는 함수 cleansup ()을 방해합니다. function cleansup () {try {strash new error ( 'error ...'); Console.log ( '이 라인은 실행되지 않습니다'); } 마침내 {console.log ( '정리 작업 완료'); }} cleansup (); // 정리 작업을 완료 // 오류 : 오류 ... 함수 testFinnally () {try {return 2; } catch (오류) {return 1; } 마침내 {return 0; }} testFinnally (); // 0[참고] 리턴 명령문의 값은 최종 코드 블록이 실행되기 전에 얻습니다.
var count = 0; function countup () {try {return count; } 마침내 {count ++; }} countup (); // 0console.log (count); // 1 함수 f () {try {console.log (0); "버그"던지기; } catch (e) {console.log (1); 진실을 반환하십시오. //이 문장은 console.log (2)를 실행하기 전에 마지막으로 코드 블록의 끝까지 지연되었을 것입니다. // 실행되지 않습니다} 마침내 {console.log (3); 거짓을 반환합니다. //이 문장은 이전 문장 return console.log (4)를 덮어 씁니다. // 실행되지 않습니다} console.log (5); // 실행되지 않습니다} var result = f (); // 0 // 1 // 3console.log (result); // false【팁 -le 블록 수준 범위
Try-Catch 문의 일반적인 사용은 선언 된 변수가 캐치 내에서만 유효한 블록 레벨 스코프를 만드는 것입니다.
ES6은 LET 키워드를 소개하여 선언하는 변수에 대한 블록 레벨 범위를 생성합니다. 그러나 ES3 및 ES5의 현재 상황에서 Try-Catch 문은 종종 유사한 효과를 달성하는 데 사용됩니다.
다음 코드에서 e는 Catch 절 내에만 존재하며 다른 곳에서 참조하려고 할 때 오류가 발생합니다.
try {throw new error (); // 오류 스로틀} catch (e) {console.log (e); // error (…)} console.log (e); // uppher referenceError : e는 정의되지 않았습니다.일반적인 오류 처리의 핵심은 먼저 코드에서 어떤 오류가 발생할 것인지 아는 것입니다. JavaScript가 느슨하게 입력되어 기능의 매개 변수를 확인하지 않으므로 오류는 코드 중에 만 발생합니다. 일반적으로 세 가지 유형의 오류를 지불해야합니다. 유형 변환 오류, 데이터 유형 오류 및 통신 오류에주의해야합니다.
【유형 변환 오류 convers
유형 변환 오류는 연산자를 사용할 때 또는 값을 자동으로 변환 할 수있는 데이터 유형의 다른 언어 구조를 사용할 때 발생합니다.
흐름 제어 명령문은 변환 오류를 입력하기 쉽습니다. 다음 작업을 결정하기 전에 IF와 같은 명령문은 부울으로 자동 변환됩니다. 특히 진술이 부적절하게 사용되는 경우 실수를 저지 릅니다.
사용하지 않은 이름 지정 변수는 자동으로 정의되지 않은 값을 할당합니다. 정의되지 않은 값은 부울 값으로 변환 될 수 있으므로 다음 함수의 IF 문은 실제로 세 번째 매개 변수가 제공되는 경우에만 적용됩니다. 문제는 정의되지 않은 것이 false로 변환되지 않으며 true로 변환 할 수있는 문자열 값 만 있지 않다는 것입니다. 예를 들어, 세 번째 매개 변수가 값 0 인 경우 if 문의 테스트가 실패하고 로그 값 1의 테스트가 전달됩니다.
함수 concat (str1, str2, str3) {var result = str1 + str2; if (str3) {// 절대적으로 += str3를 결과하지 않습니다. } 반환 결과;}흐름 제어 문에서 비-공간 값을 사용하는 것은 매우 일반적인 오류 소스입니다. 이러한 오류를 피하려면 조건을 비교할 때 부울 값으로 전달해야합니다. 사실, 어떤 형태의 비교를 수행하면이를 달성 할 수 있습니다.
함수 concat (str1, str2, str3) {var result = str1 + str2; if (str3 == 'string') {// 더 적합한 결과 += str3; } 반환 결과;}【데이터 유형 오류 error
JavaScript는 느슨하게 입력되며 변수 및 기능 매개 변수가 사용될 때까지 데이터 유형이 올바른지 확인하기 위해 비교되지 않습니다. 데이터 유형 오류가 발생하지 않도록하기 위해 적절한 데이터 유형 감지 코드 만 작성할 수 있습니다. 예기치 않은 값을 플로팅 함수로 전달할 때 데이터 유형 오류가 발생할 가능성이 가장 높습니다.
// 불안정한 함수, 비 어류 값은 오류 함수 reversesort (값) {if (values) {values.sort (); values.reverse (); }}또 다른 일반적인 실수는 매개 변수를 널 값과 비교하는 것입니다. NULL과 비교하면 해당 값이 NULL 및 정의되지 않도록합니다. 전달 된 값이 유효한지 확인하려면 NULL 값 만 감지하는 것만으로는 충분하지 않습니다.
// 불안정한 함수, 비 어류 값은 오류 함수 reversesort (값) {if (values! = null) {values.sort (); values.reverse (); }}Sort () 메소드를 포함하는 객체 (배열 대신)가 전달되면 감지가 전달되지만 Reverse () 함수를 호출 할 때 오류가 발생할 수 있습니다.
// 불안정한 함수, 비 어류 값은 오류 함수 reversesort (값) {if (typeof values.sort == 'function') {values.sort (); values.reverse (); }}전달 해야하는 유형을 정확히 아는 경우 인스턴스를 사용하여 데이터 유형을 감지하는 것이 가장 좋습니다.
// 안전하지 않은 비 어선 값은 무시됩니다. 함수 ReversEsort (values) {if (values instanceof array) {values.sort (); values.reverse (); }}【커뮤니케이션 오류】
Ajax 프로그래밍이 증가함에 따라 웹 애플리케이션이 수명주기 동안 정보 또는 기능을 동적으로로드하는 것이 일반적이되었습니다. 그러나 JavaScript와 서버 간의 통신은 오류가 발생할 수 있습니다.
가장 일반적인 문제는 데이터를 서버로 전송하기 전에 encodeUricomponent ()를 사용하여 인코딩되지 않는다는 것입니다.
// 오류 http://www.yourdomain.com/?redir=http://www.sometherdomain.com? http://www.yourdomain.com/?redir=http:%3A%2F%2Fwww.sometherdomain.com%3fa%3db%26C%3dd
위의 기사는 JavaScript의 오류 처리 메커니즘을 종합적으로 이해합니다. 이것은 내가 당신과 공유하는 모든 콘텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.