Javascript: Extending a class

Question

I am testing this at the moment and would like to create a class B that extends class A but having issues with it at present:

CLASS A

  var CustomClassA = function(){
    console.log('Custom Class A loaded')
    this.message = ' Method Called';

  }

  CustomClassA.prototype    =   {
    constructor : CustomClassA,
    firstMethod : function(msg){
        this._output(msg);
    },
    secondMethod : function(msg){
        this._output(msg);
    },
    thirdMethod: function(msg){
        this._output(msg);
    },
    _output: function(m){
        return console.log(m + this.message);
    }   
  }

CLASS B:

  var CustomClassB =  CustomClassA.extend(

    function CustomClassB(){
        console.log('Custom Class B loaded')
            this.message = ' Method Called from class B';

    },{
        firstMethod : function(msg){this._output(msg);},
            secondMethod : function(msg){this._output(msg);},
        thirdMethod: function(msg){this._output(msg);},
        _output: function(m){return console.log(m + this.message);}
  });

Hoep the two examples makes it easy and hopefully I am doing it right in the first instance. Thanks

Shouln't you be defining CustomClassA.extend and then assigning it to CustomClassB? — Travis J, Feb 20 '12 at 22:05
thanks for the comments, i know about the jquery extend but the book I am learning form actually quote the Set.extend(.... Travis J are you able to enlighten a little more if poss, thanks for the replies — Simon Davies, Feb 20 '12 at 22:40

Dagg Nabbit · Accepted Answer · 2012-02-20T23:13:37.423

1

Your first example looks fine.

The second example would only work if Function.prototype has been given a function property extend, otherwise it will throw a TypeError.

Try something like this instead.

  function CustomClassB(){
      console.log('Custom Class B loaded');
      this.message = ' Method Called from class B';
  }

  CustomClassB.prototype = Object.create(CustomClassA.prototype);

  CustomClassB.prototype.firstMethod = function(msg){this._output(msg);};
  CustomClassB.prototype.secondMethod = function(msg){this._output(msg);};
  CustomClassB.prototype.thirdMethod = function(msg){this._output(msg);};
  CustomClassB.prototype._output = function(m){return console.log(m + this.message);};

Or, if you want more syntactic sugar, you can create a convenience function to copy the prototype and merge an object into it, with a calling syntax like the extend you're using. I wouldn't necessarily recommend attaching it to Function.prototype though, as there's a good chance it could collide with some third-party code.

Older browsers don't support Object.create. If you need to support legacy browsers, you can write a function like this to emulate it:

function objectCreate(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

See here for a look at how this evolved.

edited Feb 20 '12 at 23:13

answered Feb 20 '12 at 22:17

Dagg Nabbit

75,346
19
113
141

Thanks for the reply, I keep getting: 7Uncaught TypeError: Object function Object() { [native code] } has no method 'clone' – Simon Davies Feb 20 '12 at 22:37
Yep, I'm retarded. It's `Object.create`. Since `Object.create` is fairly new and can be emulated with about [three lines of javascript](http://javascript.crockford.com/prototypal.html), I usually write a function named `clone` to serve the same purpose. I confused myself. :p – Dagg Nabbit Feb 20 '12 at 22:50
@SimonDavies Object.create is not supported by older browsers, so it would make sense to use following workaround: http://stackoverflow.com/questions/5199126/javascript-object-create-not-working-in-firefox – zatatatata Feb 20 '12 at 22:59
:-) thanks for this, I can access methods from both if init class B, but it does not seem to inherit the properties, ie: if i add another property in classA this.IamAnAprop = 'Class A property', then call this using the B class init myB= new CustomClassB(), then myB.IamAnAprop this does nothing, where as accessing the methods are ok, just a small question rather than post a new one. thanks again will look at that link – Simon Davies Feb 20 '12 at 23:04
@Vahur Roosimaa thanks yup! i understand as older browser only support EMCAScript3 but i am working on modern browsers for now and have alternative fallback fro these but I will look into this as it would be good to understand as nodoubt i will need to port to older browsers at a later time :-) thanks – Simon Davies Feb 20 '12 at 23:07
@SimonDavies I updated my answer with an alternative to `Object.create`. – Dagg Nabbit Feb 20 '12 at 23:14

Javascript: Extending a class

1 Answers1