Maison  >  Article  >  interface Web  >  Introduction au mécanisme de gestion des erreurs JavaScript (avec exemples)

Introduction au mécanisme de gestion des erreurs JavaScript (avec exemples)

不言
不言avant
2018-10-19 15:29:431799parcourir

Cet article vous présente une introduction au mécanisme de gestion des erreurs JavaScript (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Parfois, dans la fonction outil que vous encapsulez, si aucun paramètre n'est transmis ou si des paramètres du mauvais type sont transmis, certaines erreurs doivent être renvoyées en guise d'avertissement si le framework n'est pas utilisé normalement, ce sera le cas ; jetez également Si quelque chose ne va pas, si vous ne savez rien de l'erreur, vous ne pourrez pas la déboguer. Sur la base de ce qui précède, il est nécessaire de comprendre le mécanisme de gestion des erreurs.

Ce qui suit est le résumé de l’auteur. S’il y a des erreurs, veuillez les signaler.

Constructeur d'erreur
Il y a un total de 8 constructeurs de types d'erreur dans la spécification JavaScript
Erreur -- objet d'erreur
SyntaxError --erreur de syntaxe du processus d'analyse
TypeError --non valide Type
ReferenceError -- Référence invalide
RangeError -- La valeur dépasse la plage valide
URIError -- Erreur lors de l'analyse du codage URI
EvalError -- Erreur lors de l'appel de la fonction d'évaluation
InternalError -- Interne erreur du moteur Javascript Des exceptions sont levées, "Trop de récursion"

Deux d'entre elles sont spécialement expliquées :
EvalError est une erreur lors de l'appel de la fonction eval et a été obsolète Pour des raisons de compatibilité descendante, les versions inférieures peuvent le faire. encore être utilisé.
InternalError renvoie une erreur si la récursion est trop profonde. La plupart des navigateurs ne l'ont pas implémentée. Il s'agit d'une méthode non standard et est désactivée dans l'environnement de production.
Relation d'héritage
Error est la classe de base de. d'autres types héritent de la classe Error et peuvent être utilisés Object.getPrototypeOf() fourni dans ES6 pour déterminer si une classe hérite d'une autre classe.

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

Parlons de l'utilisation de chaque type d'erreur et des scénarios d'erreur.

Erreur
Un objet erreur peut être créé via le constructeur Error. Lorsqu'une erreur d'exécution se produit, un objet d'instance Error sera généré.
Syntaxe : new Error([message])
Paramètres :

message 可选,错误描述信息。

Lance une erreur
Utilisez l'instruction throw pour lancer une exception
throw new Error('Throw here est le message d'erreur')
Après l'exécution, le résultat sera imprimé sur la console :
Erreur non capturée : ce qui est renvoyé ici est le message d'erreur
Remarque : après avoir utilisé throw pour lever une exception, le message suivant le code ne sera plus exécuté.

Capturer les erreurs
Vous pouvez capturer cette erreur via l'instruction try{}catch(){}

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

Description de l'attribut :

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

let e = new Error('Le message d'erreur est émis ici');
attribut name, qui est le type d'erreur, cette fois est Error
attribut message, qui est le message d'erreur, ceci time est 'Ce qui est renvoyé ici est un message d'erreur'

SyntaxError
Erreur de syntaxe dans le processus d'analyse Il existe de nombreuses erreurs renvoyées par ce type, qui sont souvent des erreurs grammaticales causées lors de l'écriture, par exemple :

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

Il existe de nombreuses erreurs de syntaxe, donc je ne les listerai pas toutes. Lors de l'exécution dans le navigateur, la console générera une erreur et vous indiquera de quelle ligne il s'agit, donc le débogueur. est plus pratique. Mais vous devez comprendre que le type d'erreur est SyntaxError et le message d'erreur qui suit, afin qu'il soit plus facile de corriger l'erreur.

TypeError
n'est pas de type valide. Ce type d'erreur signifie que le type donné n'est pas le type requis, ce qui entraîne une inopérabilité et une erreur de type sera générée.
La variable ou le paramètre n'est pas du type attendu,
La variable ou le paramètre n'est pas du type attendu
Par exemple, l'opérateur nouveau doit être suivi d'une fonction, et celui donné n'est pas une fonction, une erreur de type sera générée

let fn = 'hello';
new fn;

Lance une erreur :
Uncaught TypeError : fn n'est pas un constructeur
Appel d'une méthode qui ne le fait pas exister sur un objet

let obj = {};
obj.fn()

Lance une erreur :
Uncaught TypeError : obj.fn n'est pas une fonction
Bien sûr, vous pouvez également forcer les paramètres entrants à être des types spécifiés lorsque encapsulant la fonction, sinon une erreur de type sera générée.

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

Lorsque le paramètre entrant n'est pas un tableau, une erreur de type personnalisé est générée :
Uncaught TypeError : Le paramètre entrant n'est pas un tableau

ReferenceError
Référence invalide.

Référence à une variable qui n'existe pas

console.log(a);

Lance une erreur
Uncaught ReferenceError : a n'est pas défini
Attribue une variable à une variable qui ne peut pas être Données assignées
Cette erreur est souvent commise lors d'un jugement dans l'instruction if après avoir appelé une méthode. L'opérateur de comparaison == est écrit comme l'opérateur d'affectation =. Par exemple, pour juger si le premier caractère d'une chaîne est le. caractère spécifié :

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

Lance une erreur :
Uncaught ReferenceError : côté gauche invalide dans l'affectation
RangeError
La valeur est en dehors de la plage valide. Dans certaines méthodes, la valeur transmise doit se situer dans une certaine plage, sinon une erreur hors plage sera générée.
La longueur transmise lors de la création du tableau est inférieure à 0

let arr = new Array(-1)

Lance une erreur :
Uncaught RangeError : longueur de tableau non valide
La méthode de répétition répète la chaîne spécifiée le nombre de fois où il est répété est inférieur à 0

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

Erreur de lancement :
Uncaught RangeError : valeur de comptage non valide

URIError
Erreur dans traitement du codage URI. Les paramètres de la fonction sont incorrects, principalement les six fonctions encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent(), escape() et unescape().
Par exemple :

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

Lance une erreur :
Uncaught URIerror : URI mal formé

Type d'erreur personnalisé
Parfois, vous souhaitez personnaliser Pour le type d'erreur, vous devez personnaliser un constructeur, puis laisser le prototype hériter de Error.prototype.

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 (0c3d1a8a9fac89c933e63fe9a97ef2f1:3:14)
  at b (0c3d1a8a9fac89c933e63fe9a97ef2f1:10:6)
  at a (0c3d1a8a9fac89c933e63fe9a97ef2f1:13:6)
  at 0c3d1a8a9fac89c933e63fe9a97ef2f1:15:4
以上为抛错的构造函数的总结,如有误之处欢迎扶正。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer