How to use constructors as a prototype chain?

Question

Suppose that I have a javascript constructor:

function Person(name) {
    this.name = name;
    this.hello = function () { return "It's a-me, " + name + "!"; };
}

the Person "type" has a convenient method, hello that I would like to re-use on another type Student. I would like for a Student to have the following structure:

function Student(name) {
    this.name = name;
    this.hello = function () { return "It's a-me, " + name + "!"; };
    this.books = [];
}

One option is to use the code for Student as-is above. This is sub-optimal for the usual reasons, such as that if I want it to mirror the Person type, then I have to manually keep their code in sync. Anyway, this is not good.

A second option (from this answer) is to do something like:

function Student(name) {
    Person.call(this, name);
    this.books = [];
}

When I mario = new Student("mario") I get the following:

Object { name: "mario", hello: hello(), books: [] }

I've successfully achieved the inheritance that I wanted, but this has the unfortunate property of placing all of the desired properties into my object. Notably, for example, there is a "hello" property on mario. It would be nice if that "hello" property could be looked up in the prototype chain.

How can I neatly create a prototype chain given the relevant object constructors?

Answer 1

When you create an object with new, the this value of your constructor function is set to the object, and that object's prototype is set to the prototype of the constructor Function being called.

That's why your properties are currently being added to the created object.

function Student {
    this.name = name
}

const student = new Student('John')

// is (almost) equivalent to the following

const student = {}
student.name = 'John'

But if you want to add properties to the prototype instead, so that you can use inheritance, then in ES5 Javascript you can do so by assigning properties directly to the prototype of your constructor function.

function Person(name) {
    this.name = name;
}

// Person is a function
// Its prototype is an instance of Object, and it has no properties
// i.e. something like Person.prototype = new Object()

Person.prototype.hello = function() {
    return 'It is I, ' + this.name
}

// Now Person.prototype has one property, "hello", which is a function.

function Student(name) {
    Person.call(this, name)
    this.books = [];
}

// Student is a function
// Its prototype is also an instance of Object with no properties

// the following is the magic line
Student.prototype = Object.create(Person.prototype)

// We replace the prototype of the Student function with a new object, but
// Object.create() allows us to set the prototype to an existing object, in this case Person.prototype,
// Person.prototype is itself an instance of Object, and we previously
// added the "hello" function to it as a property.

const student = new Student('John')

// So what happens here?
// First a new object is created, and its prototype is set to Student.prototype
// Then we call Person.call(this)
// Which executes the body of the Person function
// So you get the properties on the object itself through the body of the Person and Student functions
// And you get the shared functionality through the prototype chain of instance -> Student.prototype -> Person.prototype -> Object.prototype

Hope that helps!

Answer 2

You can use prototyping method or class sugar method as you want. Here is a simple example :

function Student(name) {
    this.name = name;
    this.books = [];
}
Student.prototype.hello = function(){
    return "It's a-me, " + this.name + "!";
}
Student.prototype.addBook = function(book){
    this.books.push(book);
}
Student.prototype.getBooks = function(){
    return this.books;
}

let mario = new Student("Mario");

console.log(mario.hello());
mario.addBook("prototyping");
mario.addBook("chain");
console.log(mario.getBooks());

class Person {
  constructor(name) {
    this.name = name;
    this.books = [];
  }
    hello(){
        return "It's a-me, " + this.name + "!";
    }
    addBook(book){
        this.books.push(book);
    }
    getBooks(){
        return this.books;
    }
}

let luigi = new Person("Luigi");
console.log(luigi.hello());
luigi.addBook("classSugar");
luigi.addBook("classType");
console.log(luigi.getBooks());

Answer 3

For longer chains use Object.assign, here is an example of making a GradStudent that is both a Student and a Person and has the personality of a Comedian and also has the properties and methods of a 4th class GameCharacter:

(function() {
  //Person
  function Person(name) {
    this.name = name;
    this.helloString = "Hello my name is "
  }
  Person.prototype.name = "Bob";
  Person.prototype.hello = function() {
     return this.helloString + this.name;
  };

  //Student
  function Student(name, books) {
    Person.call(this, name);
    this.books = books;
  }
  Student.prototype = Object.create(Person.prototype);
  Student.prototype.constructor = Student;
  Student.prototype.books = ["math","reading"];
  
  //Comedian
  function Comedian(name) {
     Person.call(this,name);
  };
  Comedian.prototype = Object.create(Person.prototype);
  Comedian.prototype.constructor = Comedian;
  Comedian.prototype.hello = function() {
      return "I don't know what my parents where thinking when they name me Squat, just kidding, my name is " + this.name;
  };
  
  //GameCharacter
  function GameCharacter(power) {
     this.power = power;
  };
  GameCharacter.prototype = new Object();
  GameCharacter.prototype.constructor = GameCharacter;
  GameCharacter.prototype.gainPower = function(power) {
     this.power += ", "+power;
  };
  GameCharacter.prototype.statePower = function() {
    return this.power;
  };
  
  //GradStudent
  function GradStudent(name, books, degree) {
    Comedian.call(this, name);
    Student.call(this,name,books);
    GameCharacter.call(this, "jumping");
    this.degree = degree;
    this.gainPower("flying");
  }
  GradStudent.prototype = Object.create(Student.prototype);
  Object.assign(GradStudent.prototype, Comedian.prototype, GameCharacter.prototype);
  GradStudent.prototype.constructor = GradStudent;
  
  
  var gradStudent = new GradStudent("Bill",["C", "C++", "JavaScript"], "B.S.");
  
  console.log(gradStudent.hello() + " I have a " + gradStudent.degree +" I am studying " + gradStudent.books.toString() + ". \n In a game I play my power's are "+ gradStudent.statePower() + ". \n Is gradStudent also a Student? " + (gradStudent instanceof Student) + "" );
  
  var otherStudent = new Student("Jennifer" ,["english", "science"]);
  
  console.log(gradStudent.books.toString()  +  " " + otherStudent.books.toString());

})();

GradStudent is an instance of Student, it's a type of Student, and can also do all the things Comedian and GameCharacter does. The value of Object.assign is that kind of multiple inheritance.

Answer 4

I can accomplish such a thing with the following:

function Student(name) {
    Object.setPrototypeOf(this, new Person(name));
    this.books = [];
}

However, I'm not familiar enough with javascript to know what possible problems might arise with this solution. Coming from other OO style languages, it feels weird for the prototype of mario to be an actual instance of a Person, but I suppose everything in js is an instance, in some sense, so this might just be bias on my part.