Class Inheritance in Javascript

Question

I am wondering how to simulate Class Inheritance in JavaScript. I know class doesn't apply to JavaScript, the way we use is Functions to create objects and do the inheritance things through Prototype object.

For example, how do you convert this structure into JavaScript :

public class Mankind {
    public string name;
    public string lastname;
}

public class Person: Mankind {
    public void Run(string fromWhat) {
        //write the run logic
    }
}

What is the equivalent of this piece of code in JavaScript.

Edit:

I've also found another link where Douglas Crockford explains different inheritance models as CMS does: Classical Inheritance in JavaScript.

Hope it helps others as well.

Community · Accepted Answer · 2017-05-23 12:16:55Z

10

There are plenty ways of implementing inheritance and behavior reuse in JavaScript, perhaps the way that is more similar to your class-based OOP example would be the pseudo-classical inheritance:

function Mankind (name, lastname) {
  this.name = name;
  this.lastname = lastname;
}

function Person (name, lastname) {
  this.name = name;
  this.lastname = lastname;

  this.run = function() {
    // run logic
  };
}
Person.prototype = new Mankind();
Person.prototype.walk = function () {
  // walk logic
};

The difference between run and walk is that the first will exist on every object instance of Person, and the second method, walk, will exist only in Person.prototype and will be accessed through the prototype chain.

In this pattern you see a bit of code duplication, we need the logic to initialize the fields also on the inherited constructor, another pattern that avoids this, is Constructor Function application:

function Mankind (name, lastname) {
  this.name = name;
  this.lastname = lastname;
}

function Person (name, lastname) {
  Mankind.apply(this, arguments);
  this.run = function() {
    // run logic
  };
}

More info:

How to inherit from a class in JavaScript (various examples)
Inheritance Patterns in JavaScript (article)
Classical Inheritance in JavaScript (article)

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jan 25, 2010 at 1:59

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

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

2 Comments

Tarik Over a year ago

Thanks, you are very generous as always :)

Christian C. Salvadó Over a year ago

You're welcome Aaron, if you have any doubts, don't hesitate to comment!

Jared Smith · Accepted Answer · 2019-09-10 14:21:48Z

1

Updated for ES 6:

class Mankind {
    constructor (lastName, firstName) {
      this.lastName = lastName;
      this.firstName = firstName;
    }
}

class Person extends Mankind {
    run (fromWhat) {
        //write the run logic
    }
}

answered Sep 10, 2019 at 14:21

Jared Smith

22.3k5 gold badges50 silver badges98 bronze badges

Comments

George Godik · Accepted Answer · 2010-01-25 01:56:56Z

0

check out mooTools

http://mootools.net/docs/core/Class/Class

answered Jan 25, 2010 at 1:56

George Godik

1,7161 gold badge14 silver badges19 bronze badges

1 Comment

Tarik Over a year ago

I do wanna make it w/o using Libraries. Can you provide pure javascript example instead of Abstracted one.

user982671 · Accepted Answer · 2013-04-20 07:33:50Z

(function(){
function Mankind() {
    this.name = "joe";
}
function Person(){
    this.Run = function(fromWhat){
        alert(this.name + ' runs from ' + fromWhat + '!');
    }
}
Person.prototype = new Mankind;

var dude = new Person;
dude.Run('bear');
})()

Instead of using static data structure (class-type) definitions, javascript uses functions to dynamically build data structure prototypes. That's a big leap because it allows you to build a structure as you gather enough context to know what you really need. The prototype chain is dynamic as well, which is another big leap and I'm just starting to wrap my head around it.

Instead of more words, check the following source Luke:

(function(){
// prototype chaining example
function f1(){this.foo = "foo"}
function f2(){this.bar = "bar"}
function f3(){this.bat = "bat"}
f2.prototype = new f1();
f3.prototype = new f2();
var a = new f1;
var b = new f2;
var c = new f3;
// state is inherited
var member_list = [
a.foo, // "foo"
a.bar, // undefined
a.bat, // undefined
b.foo, // "foo"
b.bar, // "bar"
b.bat, // undefined
c.foo, // "foo"
c.bar, // "bar"
c.bat // "bat"
];
// prototypes are chained
var instanceof_list = [
a instanceof f1, // true
a instanceof f2, // false
a instanceof f3, // false
b instanceof f1, // true
b instanceof f2, // true
b instanceof f3, // false
c instanceof f1, // true
c instanceof f2, // true
c instanceof f3 // true
];

// try to break chain
function f4(){this.fu = "fu"}
f2.prototype = new f4;

// state is preserved
var member_list2 = [
a.foo, // "foo"
a.bar, // undefined
a.bat, // undefined
b.foo, // "foo"
b.bar, // "bar"
b.bat, // undefined
c.foo, // "foo"
c.bar, // "bar"
c.bat // "bat"
];
// chain not broken, but link is removed 
var instanceof_list2 = [
a instanceof f1, // true
a instanceof f2, // false
a instanceof f3, // false
b instanceof f1, // true
b instanceof f2, // false
b instanceof f3, // false
c instanceof f1, // true
c instanceof f2, // false
c instanceof f3 // true
];
// no new link is added
var instanceof_list3 = [
a instanceof f4, // false
b instanceof f4, // false
c instanceof f4 // false
];
debugger    
})()

Collectives™ on Stack Overflow

Class Inheritance in Javascript

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related