How to create new JavaScript class based on an existing class and extend it

Question

I am learning JavaScript and am little confused on how to create new JavaScript class based on an existing class and extend it.

I have a Person class which, I have created 2 instances from (John and Suzie). Now, I want to create another classe (Employee) based on Person with few more properties like Employee Number (and is it possibleto go back to John so that he inherits from Employee class).

This is what I have got:

var Person = function (name, age){
    this.name = name || "UNKNOWN";
    this.age= age || "UNKNOWN";
}
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old");
};
var john = new Person("John Smith",72);
var Suzie = new Person("Suzie Brown", 25);

You are not showing any code related to Employee class. What are you trying and what problem are you having? — Mike Brant, Sep 23 '13 at 21:51
Employee class will be the same as Person class but with EmployeeNumber as an additional property. I am just experimenting. — Andy, Sep 23 '13 at 21:55
possible duplicate of [Correct javascript inheritance](http://stackoverflow.com/questions/10898786/correct-javascript-inheritance) — Bergi, Sep 23 '13 at 22:21

score 0 · Answer 1 · answered Sep 23 '13 at 21:51

0

//create Employee
var Employee = function(name, age, ...extra parameters){
    this.name = name || "UNKNOWN";
    this.age= age || "UNKNOWN";
    //employee related stuff...
};
//extend Person
Employee.prototype = new Person();

answered Sep 23 '13 at 21:51

Naftali

144,921
39
244
303

Shouldn't checking name and age be done in Person? And have objects that inherit from it take advantage from it by calling `Person.apply(this,arguments)` or if you want to be specific about the arguments: `Person.call(this,name,age);` Employee.prototype.constructor isn't pointing to Employee and there is no need to create an instance of Person for inheritance. This sort of questions have been asked quite a lot that's why I tried to formulate an answer that covers inheritance, overriding and calling super http://stackoverflow.com/a/16063711/1641941 – HMR Sep 24 '13 at 11:15

score 0 · Answer 2 · answered Sep 23 '13 at 21:52

0

var Employee = function (name, age, employeeNumber) {
    ...
};

Employee.prototype = new Person();  // copies Person's name and age to Employee
Employee.prototype.employeeNumber = 0;  // or whatever defaults you want

var Bob = new Employee(...);

answered Sep 23 '13 at 21:52

Brian

7,394
3
25
46

If there are many instance variables created in Person and if they are mutable then it's saver to call `Person.apply(this,arguments);` in the Employee body: http://stackoverflow.com/a/16063711/1641941 – HMR Sep 24 '13 at 11:07

score 0 · Accepted Answer · answered Sep 23 '13 at 21:59

Assign your prototype to an instance of your parent and make sure to call the parent constructor in the child constructor:

var Person = function (name, age){
    this.name = name || "UNKNOWN";
    this.age= age || "UNKNOWN";
}

Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old");
};

var Employee = function(name, age, id) {
    Person.call(this, name, age);

    this.id = id || 'UNKNOWN';
};

Employee.prototype = new Person();

Employee.prototype.getHired = function() {
    console.log('ZOMG I GOT HIRED! My ID # is:', this.id);
};

Some examples of using it:

var bob = new Person('Bobby', 25);
console.log(bob.name); //Bobby
console.log(bob.age); //25
console.log(bob.id); //undefined
bob.sayHello(); //Hello, my name is Bobby and I am 25 years old

var suse = new Employee('Susan', 32, 1337);
console.log(suse.name); //Susan
console.log(suse.age); //32
console.log(suse.id); //1337
suse.sayHello(); //Hello, my name is Susan and I am 32 years old
suse.getHired(); //ZOMG I GOT HIRED! My ID # is: 1337

How to create new JavaScript class based on an existing class and extend it

3 Answers3