0

I'd like to establish an inheritance relation between some classes. Take, for instance, Element which would be the abstract superclass, and then Rect and Triangle as child classes.

Element has some common code in its constructor, besides the common functions set on its prototype.

Element = function (id, attr) {
    // Setting attributes and id...
    this._callback_click = _bind(this._callback_click, this);
};

I've been reading some questions, such as this, and it seems there's more than one way to go about it, although they might be equivalent in the end.

  1. Using new:

    Rect = function (id, attr) {
        Element.call(this, id, attr);
        // Setting Rect's own attributes...
    };
    
    Rect.prototype = new Element(null, {});
    Rect.prototype.constructor = Rect;
    // Seems somewhat pointless to pass these arguments, but I have none
    // at this point in the code.
    
  2. Using Object.create:

    Rect = function (id, attr) {
        Element.call(this, id, attr);
        // Setting Rect's own attributes...
    };
    
    Rect.prototype = Object.create(Element.prototype);
    Rect.prototype.constructor = Rect;
    
  3. Using temporary constructors:

    function makePrototype(superclass) {
        function f() { }
        f.prototype = superclass.prototype;
        f.prototype.constructor = f;
        return new f();
    }
    
    Rect = function (id, attr) {
        Element.call(this, id, attr);
        // Setting Rect's own attributes...
    };
    
    Rect.prototype = makePrototype(Element);
    Rect.prototype.constructor = Rect;
    
  4. Using clone:

    function clone(object) {
        var key, copy = {};
        for (key in object) { copy[key] = object[key]; }
        return copy;
    }
    
    Rect = function (id, attr) {
        Element.call(this, id, attr);
        // Setting Rect's own attributes...
    };
    
    Rect.prototype = clone(Element.prototype);
    Rect.prototype.constructor = Rect;
    

Does any of these methods have an (dis)advantage over the others?

I suspect the clone method might not be correct, although I'm not sure as to what the reason could be.

Finally, correct me if I'm wrong, but I believe the new method could show unexpected results, since _callback_click is bound twice (when setting the prototype, and when calling the Element constructor from within Rect).

Community
  • 1
  • 1
afsantos
  • 5,178
  • 4
  • 30
  • 54
  • 1
    you can see coffeescript way, [coffeescript inheritance](http://coffeescript.org/#try:class%20Element%0A%20%20constructor%3A%20-%3E%20console.log%20'amazing'%0A%0Aclass%20Rect%20extends%20Element%0A%20%20initialize%3A%20-%3E%20console.log%20'way') – Idan Wender Sep 21 '13 at 10:34
  • @IdanWender Interesting. At a first glance, it seems like an improved mix of some of the methods above. – afsantos Sep 21 '13 at 10:42
  • 1
    http://ejohn.org/blog/simple-javascript-inheritance/ is also a good read. – Kerry Liu Sep 27 '13 at 03:23
  • @KerryLiu A good read, indeed. Reminds me of Backbone.js's way of doing it. – afsantos Sep 27 '13 at 09:21
  • Also, [Object.Create](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create) is the [ES5](http://kangax.github.io/es5-compat-table/) way of doing prototypical inheritance. – Kerry Liu Sep 27 '13 at 15:16

0 Answers0