Simple Example of Javascript Inheritance?

Question

I've searched on SO and elsewhere for a simple example of inheritance and can't find one. Examples I've seen are obscure, complex, or just make me uncomfortable. I have several service functions that all share some functionality, from what I would call a baseservice:

function baseservice() {
   var loadAnimate = function () {
      $('#ajax-spinner').show();
    };
   var loadComplete = function () {
      $('#ajax-spinner').hide();
    };
   var apiEndpoint = function() {
      return "http://api.com/api/";
    };
};

I have other services now that have this functionality:

var documentservice = function() {
    // repeated code
    var loadAnimate = function () {
        $('#ajax-spinner').show();
    };
    var loadComplete = function () {
        $('#ajax-spinner').hide();
    };

    var apiEndpoint = "http://api.com/api/";

    var sendRequest = function (payload, callback) {
        loadAnimate();
        // do stuff with apiEndpoint
        // call loadComplete on promise
    };

How can I provide documentservice with access to those items in baseservice?

[JavaScript is a class-free, object-oriented language, and as such, it uses prototypal inheritance instead of classical inheritance. This can be puzzling to programmers trained in conventional object-oriented languages like C++ and Java.](http://www.crockford.com/javascript/inheritance.html) — Mike, Oct 07 '13 at 17:14
this should help. http://stackoverflow.com/questions/2107556/how-to-inherit-from-a-class-in-javascript — bradcush, Oct 07 '13 at 17:16
Much as Mike said, JavaScript is a prototype language and so you want to do a google search on `javascript prototypal inheritance` to really target your search. That should help you figure out what you need. In our shop we use Saltarelle, a C# to JavaScript converter which allows us to use the more classical class-based inheritance in our code and it all gets converted to JavaScript under the hood. There are a number of tools that offer this sort of solution (a more classical OO style that gets converted to JavaScript). — Pete, Oct 07 '13 at 17:17

score 2 · Accepted Answer · answered Oct 07 '13 at 17:28

Since Javascript is a prototypical language, it doesn't have the same sort of class inheritance that a language like, say, Java has. If you want a very simple instance of inheritance, you could try something like:

function baseservice() {
  this.loadAnimate = function () {
    $('#ajax-spinner').show();
  };
  this.loadComplete = function () {
    $('#ajax-spinner').hide();
  };
  this.apiEndpoint = function() {
    return "http://api.com/api/";
  };
};

var documentservice = new baseservice();
documentservice.sendRequest() = function() { /* ... */ }

Then, documentservice has all of baseservice's members (note the this. in baseservice's function declaration instead of var).

If you don't want to have to use the new keyword, you can create a function extend either adds a field pointing to baseservice (document.baseservice = baseservice) or does a deep (recursive) copy, then adds documentservice.sendRequest.

Of course, folks have already worked on this with things like ded/klass.

JS works very differently to classical inheritance languages. Strongly advice that the OP read Crockford's "JavaScript the Good Parts" book. http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ — deitch, Oct 07 '13 at 17:29

Simple Example of Javascript Inheritance?

1 Answers1