How do I implement inheritance in javascript?

Question

How do I implement inheritence in Javascript? I am getting started with Knockout.js and implementing ViewModels/page. However I have some functions/code that I want it shared across all ViewModels.

I was wondering how do I implement inheritence in this case?

[here](http://www.codeproject.com/Articles/303796/How-to-Implement-Inheritance-in-Javascript) you will find what you need. — Simon Dorociak, May 27 '12 at 14:57
possible duplicate of [Performing Inheritance in Javascript](http://stackoverflow.com/questions/1586915/performing-inheritance-in-javascript) — JJJ, May 27 '12 at 15:02
Or you can go the coffeescript way and use its syntax to create classes and inherit from one another. Lot more details are on coffeescript.org. In the end it compiles to standard OO javascript but it is a lot easier to read and write when having to deal with classes. — Tallmaris, May 27 '12 at 16:26

score 6 · Accepted Answer · edited Jul 03 '12 at 00:40

6

Inheritance might not necessarily be the answer. Why not create an object literal with all the methods that each ViewModel should implement. I am unfamiliar with knockout, but here's how you might do it in native js.

    var sharedMethods = {
             run: function () {},
             jump: function () {}
        };

    function Person () {};
    // Use jQuery's extend method
    // Now person has run, jump, and talk
    $.extend(Person.prototype, sharedMethods, {
        talk: function () {}
    });

edited Jul 03 '12 at 00:40

Michael Best

16,623
1
37
70

answered May 27 '12 at 15:08

Trevor

11,269
2
33
40

What you propose is what actually passes for inheritance in prototype-based OO (I support your solution) – lanzz May 27 '12 at 15:50
Cool! I like your solution and is easy to understand and implement. – Tim Tom May 27 '12 at 19:09
In js, I'd call implementing inheritance following the prototype chain. Not just implementing a shared set of methods. – Trevor May 30 '12 at 12:40
Although it's been awhile, I just realized that before this last revision, I was actually adding methods to the shared methods object. You must create a new object first, add shared methods, and then a new set of methods for this to work properly across multiple object types. – Trevor Jul 02 '12 at 12:22
Assigning to the prototype isn't as good (you overwrite the `constructor` property). If you do assign to it, you should then reset `constructor`: `Person.prototype.constructor = Person;`. I'll change the answer to extend the prototype instead of overwriting it. – Michael Best Jul 02 '12 at 21:07
1

If my edit doesn't go through, the change is this: `$.extend(Person.prototype, sharedMethods...` – Michael Best Jul 02 '12 at 21:12

score 2 · Answer 2 · answered Sep 25 '12 at 22:07

JavaScript provides prototype inheritance. Objects do inherit from other objects. This can be fine for method inheritance, but it does not work for properties inheritance.

Typically to inherit methods you could use:

function BaseViewModel() { 
   var self = this;
   self.name = ko.observable();
}

function Person() {
   var self = this;
   self.firstname = ko.observable();
}

Person.prototype = new BaseViewModel();

But that causes all the persons to share the same object as prototype! When you change the name for one person, the value get's propagated to all the Persons. I tend to use the jQuery's extend method.

function Person() {
   var self = this;
   $.extend(self, new BaseViewModel());

   self.firstname = ko.observable();

}

This way the values from BaseViewModel get copied to Person.

score 0 · Answer 3 · answered May 27 '12 at 15:46

Here's the link from crockford.com
Its the best place to know anything about object oriented Javascript.
Though his methods are little complex to understand at first. Its one of the best best resource as he is best known for his ongoing involvement in the development of the JavaScript language, for having popularized the data format JSON (JavaScript Object Notation), and for developing various JavaScript related tools such as JSLint and JSMin.

How do I implement inheritance in javascript?

3 Answers3