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. — Mike
– Mike, Commented Oct 7, 2013 at 17:14
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
– Pete, Commented Oct 7, 2013 at 17:17

Michael Tang · Accepted Answer · 2013-10-07 17:28:17Z

2

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.

answered Oct 7, 2013 at 17:28

Michael Tang

4,9265 gold badges27 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

deitch Over a year ago

JS works very differently to classical inheritance languages. Strongly advice that the OP read Crockford's "JavaScript the Good Parts" book. amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/…

Collectives™ on Stack Overflow

Simple Example of Javascript Inheritance?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related