Javascript OOP - Skipping setting the child constructor

Question

Okay, so I'm trying to get my head around Javascript OOP and it's lovely mix of prototypes, prototype pointers, and constructors. I was reading the MDN introduction (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript) and it had the following example:

// Define the Person constructor
var Person = function(firstName) {
  this.firstName = firstName;
};

// Add a couple of methods to Person.prototype
Person.prototype.walk = function(){
  console.log("I am walking!");
};

Person.prototype.sayHello = function(){
  console.log("Hello, I'm " + this.firstName);
};

// Define the Student constructor
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;

// Replace the "sayHello" method
Student.prototype.sayHello = function(){
  console.log("Hello, I'm " + this.firstName + ". I'm studying "
              + this.subject + ".");
};

// Add a "sayGoodBye" method
Student.prototype.sayGoodBye = function(){
  console.log("Goodbye!");
};

// Example usage:
var student1 = new Student("Janet", "Applied Physics");
student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
student1.walk();       // "I am walking!"
student1.sayGoodBye(); // "Goodbye!"

// Check that instanceof works correctly
console.log(student1 instanceof Person);  // true 
console.log(student1 instanceof Student); // true

But if I test it out, and comment out the line:

Student.prototype.constructor = Student;

Everything works exactly the same. What's going on? Is there something important not being set that will bite my ass later?

if you log a student instance in chrome Dev tools it'll say its a Person when you don't repair the constructor property — HMR, Feb 15 '15 at 23:38

score 0 · Accepted Answer · answered Feb 15 '15 at 23:14

0

When you create Student...

function Student() {
    /* ... */
}

... it automatically has a prototype object with a own constructor property:

Student.prototype.hasOwnProperty('constructor'); // true
Student.prototype.constructor;                   // Student

However, the code overwrites that prototype with another object:

Student.prototype = Object.create(Person.prototype);

Therefore, now Student.prototype does no longer have an own constructor property. Instead, it inherits a constructor property from Person.prototype:

Student.prototype.hasOwnProperty('constructor'); // false
Student.prototype.constructor;                   // Person

Therefore, the code creates the constructor property to the new prototype:

Student.prototype.constructor = Student;
Student.prototype.hasOwnProperty('constructor'); // true
Student.prototype.constructor;                   // Student

answered Feb 15 '15 at 23:14

Oriol

274,082
63
437
513

But how come it works exactly the same when I comment out the `Student.prototype.constructor = Student;` line? – Russbear Feb 15 '15 at 23:21
1

@Russbear No, it isn't the same. Try `new Student().constructor`. If you remove that line, it returns `Person` instead of `Student`. – Oriol Feb 15 '15 at 23:23
Okay, I think I got it. The duplicate question here http://stackoverflow.com/questions/4012998/what-it-the-significance-of-the-javascript-constructor-property says "The constructor property makes absolutely no practical difference to anything internally. It's only any use if your code explicitly uses it. " – Russbear Feb 15 '15 at 23:24

Javascript OOP - Skipping setting the child constructor

1 Answers1