How to use prototyping to implement an Exception class

Question

I'm trying to create an Exception class in JavaScript and I'm having a slight problem with the prototyping although I have been using JavaScript for a a long time I have never really used prototyping properly

Right so here is my code,

// load the Object Prototype
Exception = Object;

Exception.prototype = new function () {
    // set defaults
    this.name = "Exception";
    this.message = "";
    this.level = "Unrecoverable";
    this.html = "No HTML provided";

    // code so that the console can get the name from this.name insted of using [object Object]
    this.getName = function(){
        return this.name;
    }

    // this is the exec of the object prototype the code that is executed when the new Exception call is made
    this.exec = function(msg, name, lvl, html){
        // create a return variable
        var ret;
        // check that msg is defined and is not empty
        if(typeof(msg) == "undefined" || msg == ""){
            throw new Exception("Can't throw exception without a msg");
        }

        // set up this Exception Object values
        this.name = (typeof(name) == "undefined")? this.name : name;
        this.level = (typeof(lvl) == "undefined")? this.level : lvl;
        this.message = msg;
        this.html = (typeof(this.html) == "undefined")? this.html : html;

        // delete the getName function so it does not get set though to the console
        delete this.getName;
        // save the Exception object to our return variable
        ret = this;
        // re add the getName object to the Exception Object so that it can be called from the console
        this.getName = function(){
            return this.name;
        }
        // return the saved Exception object without the getName method
        return ret;
    }
}

but for some reason in the console it's returning the String given as the argument for msg

here is the console output i recive

throw new Exception("test");
test
    0: "t"
    1: "e"
    2: "s"
    3: "t"
    length: 4
    __proto__: String

any help would be greatly appreciated

Answer 1

Judging from your code I think this is what you want to do:

Exception.prototype = new Error;
Exception.prototype.constructor = Exception;

function Exception(message, name, level, html) {
    if (typeof message !== "string")
        throw new Exception("Expected an error message.");

    this.message = message;
    this.name = name || "Exception";
    this.level = level || "Unrecoverable";
    this.html = html || "No HTML provided";
}

See the MDN docs for more information.

Edit: If you're having problems with prototypal inheritance then I suggest you spend some time learning about it: https://stackoverflow.com/a/8096017/783743

Answer 2

This is an example of an Exception 'class' that meets your requirements:

/*
  This is a constructor function. It creates a new Exception object.
  Use it with the 'new' keyword , e.g. var e = new Exception("Another error").
 */
function Exception( message, name, level, html ) {   

    if ( !message ) {
        throw 'No exceptions without a message!';
    }  

    /*
      These properties may have different values for each instance so set
      them here in the constructor rather than adding them to the prototype.
     */
    this.message = message;
    this.name = name || "Exception";
    this.level = level || "Unrecoverable"; 
    this.html = html || "No HTML provided"; 
 }

/*     
  Overwrite the toString method inherited from Object.prototype
  by adding a toString method that shows the name and message.
  This method is the same for each instance so add it to the
  prototype object instead of having to create and add it to
  'this' in the constructor every time an instance is created.
 */
Exception.prototype.toString = function () {
    return this.name + ': ' + this.message; 
}

Try it out

try {
    throw new Exception("test");
} catch (e) {
    console.log( e instanceof Exception);    // true
    console.log( e instanceof Error);        // false
    console.log( e );       
    // Exception {message: "test", name: "Exception", level: "Unrecoverable"...
}

throw new Exception("test");                 // Uncaught Exception: test   

Instead of adding a toString method to Exception.prototype as above, an alternative way to ensure that the toString method of Exception objects returns their name and message is to inherit from the built-in Error object's prototype.

Exception.prototype = Error.prototype;

This also makes the default name of an Exception object 'Error' if it is not set in the Exception constructor - but that is not required in our case.

It would also mean that any properties added to Error.prototype would be present.

var e = new Exception("Another");   

Error.prototype.about = 'This is an Error';

console.log( e.about );                  // 'This is an Error'
console.log( e instanceof Exception);    // true
console.log( e instanceof Error);        // true

Or, instead of inheriting from Error.prototype we could inherit from an Error instance as in Aadit M Shah's answer.

Exception.prototype = new Error();

At the cost of creating a new Error object this avoids, as they're not now pointing to the same object, a potential issue of changes to Exception.prototype affecting Error.prototype. Changes to Error.prototype will still affect Exception.prototype as they are inherited via the Error object.

The simplest approach which seems to meet your needs may be to avoid inheriting from an Error object or Error.prototype at all, and to just add your own toString method to Exception.prototype as shown in the first example.

Answer 3

Had to edit this because some of the info I posted before is not true or very helpful.

I said before that JavaScript does not have private methods or properties; this is untrue. Private methods can be accomplished through the use of closures: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures According to the documentation it comes with a performance penalty.

var Counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }  
})();

To "subclass" an existing object you have to use prototype as JavaScript is not a class based language. Here is an example exposing the disadvantages of prototype in JavaScript. What the following excellent document fails to mention or at least give proper warning is that "child" objects share a lazy copied instance of a "parent" object. To be more precise if two Object have the same prototype (share the same parent) they share the same INSTANCE of that parents object properties. https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model Some sample code from there:

function Employee () {
  this.name = "";
  this.dept = "general";
  this.objectVal=[];
}
function Manager () {
  this.reports = [];
}
Manager.prototype = new Employee;

var bob=new Manager();
bob.name="bob";
bob.objectVal.push("should not be in jane");
var jane=new Manager();
jane.name="jane";
console.log(jane.name);//correct
console.log(jane.objectVal);//incorrect shows ["should not be in jane"]

Simple values will be correct but object values will not be. Later in that document there is a solution given for this problem, namely:

function Manager () {
  Employee.call(this);
  this.reports = [];
}
Manager.prototype = new Employee;

What Employee.call(this) in Manager does is that it calls the Employee function with the this context of Manager. So the lines this.name, this.dept become a direct property to Manager, not through prototyping but through the fact that they are initialized in the Manager's this context.

The line Manager.prototype = new Employee; could be omitted but then (bob instanceof Employee) would evaluate to false.

So when creating your own classes you could put all properties that need to be "uniquely inherited by child instances" and are object values in the "parent" with the this.something syntax.

Methods of the "parent" can be (and according to some docs should be) specified with the prototype syntax:

//var Employee=function(){....}
Employee.prototype.EmployeeMethod=function(){}
//or
//var Employee=function(){....}
Employee.prototype={EmployeeMethod:function(){},AnotherOne:function(){},....};

If you'd like to "subclass" Error (have Error as Exceptions prototype) then the problem is that you didn't write Error, I have not been able to use Error as a prototype and use it's properties:

var Exception=function(msg){
// both don't work
//    Error.call(Exception.prototype,msg);
    Error.call(this,msg);
}
Exception.prototype=new Error;

var e=new Exception("my message");
console.log(e.message);//empty string

Not sure why this is, calling Error.call(this,msg) would set Error's properties to Exceptions properties (copies them to Exception) if they were in the Error functions body defined as this.someProperty. Calling Error.call(Exception.prototype,msg) would not copy the properties to Exception but Exception would still have those properties through the prototype chain.

The following link is to an article where you can find an elegant solution to subclassing although I didn't fully understand the code (solution is on part 2): http://www.lshift.net/blog/2006/07/24/subclassing-in-javascript-part-1

Answer 4

To address the OP's reason for "subclassing" Error in the first place; there are several 3rd party JavaScript consoles out there for IE.

I've tried Firebug lite and it'll do what you need. No more [object:Object] in your console when logging something:

https://getfirebug.com/firebuglite