How Do I Call An Inherited JavaScript Constructor With Parameters?

Question

Greetings,

After reading the following article I have a question: https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript

In the inheritance example, the Person constructor doesn't take any parameters. How would this same example look if I were to add one and call it from the Student constructor?

Thanks!

Answer 1

Well, a way that you can re-use the logic of the Person constructor is invoking it with call or apply, for example:

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

function Student(gender) {
  Person.apply(this, arguments);
}
Student.prototype = new Person(); // make Student inherit from a Person object
Student.prototype.constructor = Student; // fix constructor property

var foo = new Student('male');
foo.gender;             // "male"
foo instanceof Student; // true
foo instanceof Person;  // true

If you want to prevent the execution of the Person constructor when is called without arguments (like in the line: Student.prototype = new Person();), you can detect it, e.g.:

function Person(gender) {
  if (arguments.length == 0) return; // don't do anything
  this.gender = gender;
}

Answer 2

Accepted answer seems to be incorrect. Based on what Mozilla says about OO JavaScript, correct way to do it is:

var Person = function(firstName) {
    this.firstName = firstName;
};

function Student(firstName, subject) {
  // Call the parent constructor, making sure (using Function#call)
  // that "this" is set correctly during the call
  Person.call(this, firstName);

  // Initialize our Student-specific properties
  this.subject = subject;
};

// Create a Student.prototype object that inherits from Person.prototype.
// Note: A common error here is to use "new Person()" to create the
// Student.prototype. That's incorrect for several reasons, not least 
// that we don't have anything to give Person for the "firstName" 
// argument. The correct place to call Person is above, where we call 
// it from Student.
Student.prototype = Object.create(Person.prototype); // See note below

// Set the "constructor" property to refer to Student
Student.prototype.constructor = Student;

// Example usage:
var student1 = new Student("Janet", "Applied Physics");

As you can clearly see, Mozilla specifies that it is a common error to use "new Person()" to create the Student.prototype. Hence accepted answer is misleading.

I have actually tested this in my ongoing project and Mozilla's way is correct, while above answer does not work.