Um entendimento abrangente dos mecanismos de manuseio de erros em JavaScript

As palavras anteriores

O tratamento de erros é crucial para o desenvolvimento de aplicativos da Web. Ele não pode prever possíveis erros com antecedência e as estratégias de recuperação não podem ser adotadas com antecedência, o que pode levar a uma experiência ruim do usuário. Como qualquer erro de JavaScript pode fazer com que a página da web seja inutilizável, como desenvolvedor, você deve saber quando, por que e o que acontecerá. Este artigo apresentará o mecanismo de manuseio de erros em JavaScript em detalhes

objeto de erro

O objeto de erro é um objeto que contém informações de erro e é um objeto nativo do JavaScript. Quando ocorre um erro durante a análise ou execução do código, o mecanismo JavaScript gera e lançará automaticamente uma instância do objeto de erro e, em seguida, o programa inteiro será interrompido quando o erro ocorre.

 console.log (t); // Referência não capturada: t não é definida

O ECMA-262 especifica que um objeto de erro inclui duas propriedades: mensagem e nome. O atributo da mensagem salva a mensagem de erro, enquanto o atributo de nome salva o tipo de erro

 // Geralmente, a instrução Try-Catch é usada para capturar erros, tente {t;} catch (ex) {console.log (ex.message); // t não é definido console.log (ex.name); // referenceError}

O navegador também expandiu as propriedades do objeto de erro e adicionou outras informações relevantes. Entre eles, o mais implementado pelos fabricantes de navegadores é o atributo de pilha, que indica informações de rastreamento de pilha (o Safari não o suporta)

 tente {t;} catch (ex) {console.log (ex.stack); //@file: /// d: /wamp/www/form.html: 12: 2}

Obviamente, você pode usar o construtor Error () para criar um objeto de erro. Se o parâmetro da mensagem for especificado, o objeto de erro o usará como sua propriedade de mensagem; Se não for especificado, ele usará uma sequência padrão predefinida como o valor da propriedade

 novo erro (); novo erro (mensagem); // Geralmente, use a declaração de arremesso para lançar um erro de lançamento de novo erro ('teste'); // Erro não capturado: testhrow novo erro (); // erro não capturado

 função userError (message) {this.message = message; this.name = "userError";} userError.prototype = new Error (); userError.prototype.constructor = userError; lança novo userError ("errorMessage"); // UNUGADO USERROR: errorMessage

Quando o construtor de erros () é chamado diretamente como uma função sem usar o novo operador, seu comportamento é o mesmo que quando o novo operador é chamado

 Error (); erro (mensagem); Erro de arremesso ('teste'); // Erro não capturado: Erro de TestHrow (); // Erro não capturado

O objeto de erro possui um método tostring (), que retorna o atributo da mensagem do objeto de erro.

 var teste = novo erro ('testError'); console.log (test.toString ()); // 'erro: testError'

Tipo de erro

Existem muitos tipos de erros que podem ocorrer durante a execução do código. Cada erro tem um tipo de erro correspondente e, quando ocorre um erro, um objeto de erro do tipo correspondente será lançado. ECMA-262 define os 7 tipos de erro a seguir:

 ErroreVerror (avaliação do rangeError (rangeError) ReferenceError (ReferenceError) SyntaxError (SyntaxError) TypeError (TypeError) Urierror (Urierror)

Onde o erro é o tipo base e outros tipos de erro são herdados desse tipo. Portanto, todos os tipos de erro compartilham um conjunto das mesmas propriedades. Os erros do tipo de erro são raros e, se houver, eles também são jogados pelo navegador; O principal objetivo deste tipo de base é que os desenvolvedores lançem erros personalizados

【Avaliador (erro de avaliação)】

Quando a função de avaliação não é executada corretamente, um erro de avaliação será lançado. Esse tipo de erro não aparece mais no ES5, mas continuará sendo preservado para garantir a compatibilidade com os códigos anteriores.

【RangeError (RangeError)】

Um erro do tipo RangeError será acionado quando um valor exceder o intervalo correspondente, incluindo principalmente excedendo a faixa de comprimento da matriz e excedendo o intervalo de valor numérico.

 Nova matriz (-1); // RangeError não descoberto: matriz de matriz inválida O argumento toExponencial () deve estar entre 0 e 20

【ReferenceError (erro de referência)】

O ReferenceError será acionado ao se referir a uma variável não histórica ou erro do tipo LValue.

 A; // ReferenceError não capturado: a não é definido1 ++; // ReferenceError não capturado: expressão lateral de esquerda inválida na operação postfix

SyntaxError (SyntaxError)】

Quando as regras de sintaxe não forem atendidas, um SyntaxError será jogado (erro de sintaxe)

 // Erro de nome da variável var 1a; // Syntaxerror não capturado: Número inesperado // Falta Console de Suporte.log 'Hello'); // Syntaxerror não capturado: String inesperada

【TypeError (erro de tipo)】

O erro do tipo TypeError será causado quando tipos inesperados forem armazenados em variáveis ​​ou ao acessar métodos inexistentes. Embora as causas dos erros sejam diversas, em última análise, é porque o tipo de variável não atende aos requisitos ao executar um tipo específico de operação.

 var o = new 10; // não -descoberto TypeError: 10 não é um construtor ('nome' em true); // não -descoberto TypeError: não pode usar 'no' operador para pesquisar 'nome' em truefunction.protype.toString.Call ('Nome'); // TypeError: function.ProtType.tosTring.Call é

【URIERROR (ERRO URI)】

Urierror é um erro lançado quando os parâmetros das funções relacionados a URI estão incorretos. Envolve principalmente seis funções: codeuri (), decodeuri (), codeuricomponent (), decodeuricomponent (), escape () e unescape ().

 decodeuri ('%2'); // urierror: uri malformado

Evento de erro

Quaisquer erros que não sejam processados ​​através do Try-Catch acionarão o evento de erro do objeto da janela

O evento de erro pode receber três parâmetros: mensagem de erro, URL onde o erro está localizado e o número da linha. Na maioria dos casos, apenas as mensagens de erro são úteis porque o URL apenas fornece a localização do documento, e o número da linha refere -se a uma linha de código que pode ser do código JavaScript incorporado ou de um arquivo externo.

Para especificar um manipulador de eventos de erro, você pode usar a tecnologia de nível DOM ou usar o formato padrão de eventos de nível DOM2

 // DOM0 nível window.onerror = function (mensagem, url, linha) {alert (message);} // DOM2 Nível Window.adDeventListener ("Error", function (message, url, linha) {alert (message);});

Se o navegador exibe uma mensagem de erro padrão depende do valor de retorno do OnError. Se o valor de retorno for falso, uma mensagem de erro será exibida no console; Se o valor de retorno for verdadeiro, ele não será exibido

 // O console exibe a mensagem de mensagem de erro window.onerror = function (mensagem, url, linha) {alert (mensagem); retornar false;} a; // O console não exibe a Window.onerror = function (message, url, linha) {alert (message); retornar true;} a;

Este manipulador de eventos é a última linha de defesa para evitar erros de relatório do navegador. Idealmente, você não deve usá -lo sempre que possível. Contanto que você possa usar a instrução Try-Catch adequadamente, não haverá erros entregues ao navegador e o evento de erro não será acionado.

A imagem também suporta eventos de erro. Enquanto o URL na característica SRC da imagem não puder retornar o formato de imagem reconhecido, um evento de erro será acionado. No momento, o evento de erro segue o formato DOM e retorna um objeto de evento direcionado à imagem como o alvo

Uma caixa de aviso aparece quando a imagem é carregada. Quando ocorre um evento de erro, o processo de download da imagem terminou, o que significa que ele não pode ser baixado novamente.

 var imagem = new image (); imagem.src = 'smilex.gif'; image.onerror = function (e) {console.log (e);}

Declaração de jogue e jogue erro

A declaração de arremesso é usada para lançar um erro. Quando um erro é lançado, você deve especificar um valor para a declaração de arremesso. Que tipo é esse valor? Não há requisito.

[Nota] O processo de lançamento de um erro é bloqueado e o código subsequente não será executado

 jogue 12345; jogue 'olá mundo'; jogue true; jogue {nome: 'javascript'};

Você pode usar a declaração de arremesso para lançar manualmente um objeto de erro

 lançar um novo erro ('algo ruim aconteceu'); jogue novo sintaxe ('eu não gosto da sua sintaxe. ReferenceError ('Você não citou suas referências corretamente');

O uso de cadeias de protótipo também pode criar tipos de erro personalizados herdando erros (as cadeias de protótipo são introduzidas no capítulo 6). Neste ponto, você precisa especificar o nome e os atributos da mensagem para o tipo de erro recém -criado

O navegador trata os tipos de erro personalizados herdados do erro, assim como outros tipos de erro. Criar um erro personalizado é útil se você deseja pegar o erro que você o trata e o trate de maneira diferente do erro do navegador.

 function CustomError (message) {this.name = 'CustomError'; this.Message = message;} CustomError.prototype = new Error (); lançar novo CustomError ('minha mensagem');

Quando uma declaração de arremesso é encontrada, o código para de executar imediatamente. O código continuará sendo executado apenas se uma instrução Try-Catch capturar o valor jogado.

Uma explicação mais detalhada é: quando uma exceção é lançada, o intérprete JavaScript interrompe imediatamente a lógica atualmente em execução e pulará para o manipulador de exceção nas proximidades. O manipulador de exceção está escrito na cláusula de captura da instrução Try-Catch. Se o bloco de código que lança a exceção não tiver uma cláusula de captura associada, o intérprete verificará o bloco de código fechado de nível superior para ver se possui um manipulador de exceção associado. E assim por diante até que um manipulador de exceção seja encontrado. Se a função que lança a exceção não lidar com sua instrução Try-Catch, a exceção será propagada para cima para o código que chama a função. Dessa forma, a exceção será propagada para cima ao longo da estrutura lexical do método JavaScript e da pilha de chamadas. Se nenhum manipulador de exceção for encontrado, o JavaScript lidará com a exceção como erro de programa e o relatará ao usuário

Experimente a declaração de captura e o erro de captura

ECMA-262 Edição 3 apresenta a instrução Try-Catch como uma maneira padrão de lidar com exceções no JavaScript, usado para capturar e lidar com erros

Entre eles, a cláusula de tentativa define o bloco de código onde estão localizadas as exceções que precisam ser processadas. A cláusula de captura segue a cláusula de tentativa. Quando ocorre uma exceção em algum lugar do bloco de tentativa, a lógica do código dentro da captura é chamada. A cláusula de captura é seguida pelo bloco finalmente, onde o código de limpeza é colocado. Independentemente de ocorrer uma exceção no bloco de tentativas, a lógica dentro do bloco finalmente será sempre executada. Embora a captura e finalmente seja opcional, a cláusula de tentativa requer pelo menos um dos dois para formar uma declaração completa com ela.

Todos os blocos de tentativa/captura/finalmente precisam ser fechados com aparelhos encaracolados. Os aparelhos aqui são necessários. Mesmo se houver apenas uma declaração na cláusula, os aparelhos encaracolados não podem ser omitidos.

 try{ // Generally speaking, the code here will not cause any problems // But sometimes an exception will be thrown directly by the throw statement or indirectly thrown by calling a method } catch(e){ // If and only if an exception is thrown by the try statement block, the code here will be executed // Here you can obtain a reference to the Error object or other values ​​​​thrown by the local variable e // The code here can handle this exception for some reason, or ignore this exception, and Você também pode reverter a exceção pela declaração de arremesso} finalmente {//, independentemente de a instrução TRY lançar uma exceção, a lógica em finalmente será executada e a maneira de encerrar o bloco de instrução Try é: // 1. Rescindir normalmente. Depois de executar a última declaração do bloco de declaração // 2. Termine através da interrupção, continue ou retorne a Declaração // 3. Deixe uma exceção, a exceção é capturada pela cláusula de captura // 4. Jogue uma exceção, a exceção não é capturada, continue a se propagar para cima}

Geralmente, coloque todo o código que possa lançar erros no bloco de instrução Try e coloque o código usado para manuseio de erros no bloco de captura

Se ocorrer algum código no erro de tentativa do bloco, o processo de execução do código será imediatamente saindo e o bloco de captura será executado. No momento, o bloco de captura receberá um objeto com mensagem de erro. As informações reais contidas neste objeto variam de navegador para navegador, mas o comum é que existe um atributo de mensagem que armazena a mensagem de erro

[Nota] Certifique -se de nomear o objeto de erro. Se esvaziá -lo, será relatado um erro de sintaxe.

 tente {q;} catch (error) {alert (error.message); // q não é definido} // não sexo sintaxerror: token inesperado) tente {q;} catch () {alert (error.message);}

Catch aceita um parâmetro indicando o valor jogado pelo bloco de código de tentativa

 função throwit (exceção) {tente {throw excepção; } catch (e) {console.log ('pego:'+ e); }} throwit (3); // pego: 3hrowit ('hello'); // pego: hellothrowit (novo erro ('um erro aconteceu'); // pego: erro: um erro aconteceu

Após o bloco de código de captura capturar o erro, o programa não será interrompido e continuará sendo executado de acordo com o processo normal.

 Tente {Throw "Error";} Catch (e) {Console.log (111);} Console.log (222); // 111 // 222

Para capturar diferentes tipos de erros, as declarações de julgamento podem ser adicionadas ao bloco de código de captura

 tente {foo.bar ();} catch (e) {if (e instanceof avalerror) {console.log (e.name + ":" + e.message); } else if (e instanceof rangeError) {console.log (e.name + ":" + e.message); } // ...}

Embora a cláusula finalmente seja opcional na instrução Try-Catch, depois que a cláusula finalmente for usada, seu código será executado, não importa o quê. Em outras palavras, todo o código no bloco de instrução Try é executado normalmente e, finalmente, cláusulas serão executadas; Se o bloco de declaração de captura for executado devido a um erro, a cláusula finalmente ainda será executada. Enquanto o código contiver finalmente cláusulas, não importa qual código esteja contido no bloco de instrução TRY OR CATCH - ou mesmo a declaração de retorno, a execução da cláusula finalmente não será impedida.

 // O erro não é capturado porque não há bloco de declaração de captura. Depois de executar o bloco de código finalmente, o programa interrompe a função limpa () onde o erro é lançado. function cleannsup () {tente {lança novo erro ('erro ...'); console.log ('Esta linha não será executada'); } finalmente {console.log ('Complete o trabalho de limpeza'); }} limpo (); // complete o trabalho de limpeza // erro: um erro ...

 function testfinnally () {try {return 2; } catch (error) {return 1; } finalmente {return 0; }} testFinnally (); // 0

[Nota] O valor da contagem da instrução Retorno é obtido antes que o bloco de código finalmente seja executado.

 var count = 0; function countup () {try {return conting; } finalmente {count ++; }} Condep (); // 0console.log (contagem); // 1

 função f () {tente {console.log (0); lançar "bug"; } catch (e) {console.log (1); retornar true; // Esta frase teria sido adiada até o final do bloco de código finalmente antes de executar o console.log (2); // não será executado} finalmente {console.log (3); retornar falso; // Esta frase substituirá o console de retorno da frase anterior.log (4); // não será executado} console.log (5); // não será executado} var resultado = f (); // 0 // 1 // 3console.log (resultado); // false

【Dicas】 Escopo no nível do bloco

Um uso comum de declarações de tentativa é criar escopos de nível em bloco, onde as variáveis ​​declaradas são válidas apenas dentro da captura

O ES6 apresenta a palavra-chave Let para criar um escopo de nível de bloco para as variáveis ​​que declara. No entanto, na situação atual de ES3 e ES5, as declarações de tentativa são frequentemente usadas para alcançar efeitos semelhantes

A partir do código a seguir, E só existe dentro da cláusula de captura, e um erro será lançado ao tentar fazer referência a ele de outros lugares.

 tente {lança novo erro (); // estrangulando um erro} catch (e) {console.log (e); // error (…)} console.log (e); // ReferenceError não -Esgotado: e não é definido

O núcleo do manuseio comum de erros é primeiro saber quais erros acontecerão no código. Como o JavaScript é pouco digitado e não verifica os parâmetros da função, o erro ocorrerá apenas durante o código. De um modo geral, três tipos de erros precisam receber atenção: TIPE ERRO DE CONVERSÃO, ERRO DE TIPO DE DADOS E ERRO DE COMUNICAÇÃO

Error de conversão Tipo】

O erro de conversão do tipo ocorre ao usar um operador ou usar outra estrutura de idioma dos tipos de dados que podem converter automaticamente valores.

A instrução de controle de fluxo é propensa a digitar erros de conversão. Declarações como se forem converter automaticamente qualquer valor em um booleano antes de determinar a próxima operação. Especialmente se as declarações, se usadas indevidamente, são mais propensas a cometer erros.

As variáveis ​​nomeadas não utilizadas são automaticamente atribuídas valores indefinidos. O valor indefinido pode ser convertido em um valor booleano false; portanto, a instrução IF na função a seguir é realmente aplicável aos casos em que o terceiro parâmetro é fornecido. O problema é que ele não é apenas indefinido para ser convertido em falso, nem apenas os valores de string que podem ser convertidos em verdadeiros. Por exemplo, se o terceiro parâmetro for o valor 0, o teste da instrução IF falhará e o teste do valor logarítmico 1 passará

 função concat (str1, str2, str3) {var resultado = str1 + str2; if (str3) {// absolutamente não resultar += str3; } resultado de retorno;}

O uso de valores não-booleanos em declarações de controle de fluxo é uma fonte extremamente comum de erros. Para evitar esses erros, é necessário passar nos valores booleanos quando as condições são comparadas. De fato, executar alguma forma de comparação pode conseguir isso

 função concat (str1, str2, str3) {var resultado = str1 + str2; if (typeof str3 == 'string') {// resultado mais adequado += str3; } resultado de retorno;}

Error Tipo de dados Erro】

O JavaScript é digitado livremente e não será comparado para garantir que seu tipo de dados esteja correto até que variáveis ​​e parâmetros de função sejam usados. Para garantir que os erros de tipo de dados não ocorram, apenas o código de detecção de tipo de dados apropriado pode ser gravado. É mais provável que os erros do tipo de dados ocorram ao passar valores inesperados para plotar funções

 // Funções inseguras, qualquer valor que não seja de matriz causará a função de erro reverso (valores) {if (valores) {valores.sort (); valores.Reverse (); }}

Outro erro comum é comparar parâmetros com valores nulos. A comparação com o NULL garante apenas que os valores correspondentes não sejam nulos e indefinidos. Para garantir que o valor passado seja válido, não é suficiente para detectar valores nulos apenas

 // Funções inseguras, qualquer valor que não seja de magia causará a função de erro reverso (valores) {if (valores! = Null) {valores.sort (); valores.Reverse (); }}

Se um objeto que contém o método Sort () (em vez de uma matriz) for aprovado, ele passará a detecção, mas pode ocorrer um erro ao chamar a função reverse ()

 // Funções inseguras, qualquer valor que não seja provável causará a função de erro reverset (valores) {if (typeof valores.sort == 'function') {valores.sort (); valores.Reverse (); }}

Caso você saiba exatamente em que tipo você deve passar, é melhor usar a instância para detectar seu tipo de dados

 // valores seguros e não-maiores são ignorados a função reverseSort (valores) {if (valores instanceof Array) {valores.sort (); valores.Reverse (); }}

【Erro de comunicação】

Com o aumento da programação do AJAX, tornou -se comum os aplicativos da Web para carregar informações ou funcionalidade dinamicamente durante seu ciclo de vida. No entanto, qualquer comunicação entre JavaScript e o servidor pode causar um erro

O problema mais comum é que os dados não são codificados usando o codeuricomponent () antes de enviá -los para o servidor

 // Erro http://www.yourdomain.com/?redir=http://www.sometherdomain.com?a=b&c=d//call Encodeuricomponent () Para todas as strings após 'redir =' pode resolver este problema http://www.yourdomain.com/?redir=http:%3a%2f%2fwww.sometherdomeain.com%3fa%3DB%26C%3DD

O artigo acima entende de forma abrangente o mecanismo de manuseio de erros no JavaScript. Este é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.