Why Error object can print pure string message
Question
I don't want to inherit or extend from the Error so don't mark my question is duplicate if the solution you post is inherit or extend from Error
Below is my sample code and run on Chrome. Comments below console.log is output from Chrome developer tool's console tab.
What I want to know is why the Error object can output the raw string message but my CustomError will output a object.
Is it possible to implement an object like the Error object can output the raw string message
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
function CustomError() {
this.message = "MyErrorMessage";
}
var nativeError = new Error();
var customError = new CustomError();
console.log(nativeError);
// Error
console.log(customError);
// CustomError {message: "MyErrorMessage"}
Error.prototype.message = "Modify native error prototype message";
var nativeErrorAfterModifyPrototypeMessage = new Error();
console.log(nativeErrorAfterModifyPrototypeMessage);
// Error: Modify native error prototype message
CustomError.prototype.message = "Modify custom error prototype message";
customErrorAfterModifyPrototypeMessage;
var customErrorAfterModifyPrototypeMessage = new CustomError();
console.log(customErrorAfterModifyPrototypeMessage);
// CustomError {message: "MyErrorMessage"}
customErrorAfterModifyPrototypeMessage.__proto__.message =
"Modify custom error prototype message";
console.log(customErrorAfterModifyPrototypeMessage);
//index.html:37 CustomError {message: "MyErrorMessage"}
</script>
</html>
2 answers
solution1
1 ACCPTED 2020-11-02 09:47:42
You can always override console.log and do the special treatment for CustomError yourself.
function CustomError(message = "") { this.message = message; //override toString to just return your message (or whatever you want your output to look like) this.toString = () => this.message; } const ce = new CustomError("some message"); //this shows the builtin behaviour of console.log console.log(ce); //preserve the original console.log function, we'll need it later on console.originalLog = console.log; //override console.log with a new function console.log = function() { //check if any of the arguments is a CustomError //and replace CustomErrors with its string representation for (let i = 0; i < arguments.length; i++) if (arguments[i] && arguments[i].constructor.name === "CustomError") arguments[i] = arguments[i].toString(); //call the original log function with the updated arguments console.originalLog.apply(this, arguments); } //this shows the overriden behaviour of console.log console.log(ce); //and back to original behaviour again console.log = console.originalLog; console.originalLog = undefined; console.log(ce);
Probably not the most efficient or elegant solution, but it gets the job done in most scenarios. It won't work, if the CustomError is nested inside another object or array.
Make sure to preserve the original behaviour of console.log in another variable, so you can use it, once you modified the arguments .
solution2
0 2020-11-02 09:07:54
Simply because instances of Error are treated specially by the console, using .toString() for formatting. If you want this behaviour, you must inherit from Error
The source code of the dev tools
The answer from comment by @Berg
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.