Search code examples
javascriptoopinheritanceextend

Javascript class extension


CONTEXT

I have one Base class called Entity and User and Group are both derived from this object; If I instantiate a user with the ID of 12 for example, the next time I try to do that it returns the same object. I store these in a prototype items variable. To keep these item variables separate I have to declare the User And Group functions separately although they contain the same code.

CODE

Application.prototype.Entity = function() {

};

Application.prototype.Entity.prototype.print = function() {
    var container = $("<div class='user-tag'></div>");
    container.append("<a class='friend_list ellipsis_overflow' style='background-image:url(\"" + this.entity.pic.icon + "\");'"
        + "href ='user?id=" + this.entity.id + "'>" + this.entity.name + "</a>");

    return container;
};


//HOW TO GET RID OF THIS "REPETITION"
Application.prototype.User = function(entity) {
    this.entity = entity;
    this.entity.pic = this.entity.pic || Application.prototype.default.pic;
        if (this.items[this.entity.id]) {
        return this.items[this.entity.id];
    } else {
        this.items[this.entity.id] = this;
    }
};
Application.prototype.Group = function(entity) {
    this.entity = entity;
    this.entity.pic = this.entity.pic || Application.prototype.default.pic;
    if (this.items[this.entity.id]) {
        return this.items[this.entity.id];
    } else {
        this.items[this.entity.id] = this;
    }
};
// END REPEAT


Application.prototype.Group.prototype = new Application.prototype.Entity();
Application.prototype.User.prototype = new Application.prototype.Entity();

//Application.prototype.User.prototype.constructor = Application.prototype.Entity;
//Application.prototype.Group.prototype.constructor = Application.prototype.Entity; - these don't seem to work

//THESE items VARIABLES HAVE TO REMAIN SEPARATE
Application.prototype.Group.prototype.items = {};
Application.prototype.User.prototype.items = {};

QUESTION

I specifically would like to rid my code of the repetition mentioned above, but if you see any other unnecessary code, please comment. Thanks!


Solution

  • Something like this?

    function userAndGroupConstructor(entity) {
      this.entity = entity;
      this.entity.pic = this.entity.pic || Application.prototype.default.pic;
      if (this.items[this.entity.id]) {
        return this.items[this.entity.id];
      } else {
        this.items[this.entity.id] = this;
      }
    }
    
    Application.prototype.User = function() {
      return userAndGroupConstructor.apply(this, arguments)
    }
    Application.prototype.Group = function() {
      return userAndGroupConstructor.apply(this, arguments)
    }
    

    You get distinct constructors with distinct prototypes, but avoid duplication.