Name of inherited prototype constructor

JavaScript
1

I’m following along the tutorial from Traversy Media on JS. During this video he created a:

  • Person constructor with firstName and lastName and prototype.greeting function.
  • Customer constructor that inherits the parameters of Person (firstName and lastName) and adds new parameters (phone and membership)
  • Customer inherits prototypes of Person
  • Changes Customer.prototype.constructor to Customer
    This is the part that I don’t understand. Is this just a good practice just to keep things organised or it has some other purpose?
// Inherit prototypes
Customer.prototype = Object.create(Person.prototype);

// Use Customer Constructor
Customer.prototype.constructor = Customer;

// Making separate greeting method for Customer
Customer.prototype.greeting = function() {
    return `Hello to our company ${this.firstName} ${this.lastName}!`;
}

I have commented out Customer.prototype.constructor = Customer to see if this changes the output or produces some error, but when I call greeting function on Customer1 it still executes without any error.

So, what’s the point of changing the name of the inherited prototype constructor?

Below is whole code if you want to reproduce it for yourself:

// Person constructor
function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

Person.prototype.greeting = function() {
    return `Hello ${this.firstName} ${this.lastName}!`;
}

const Person1 = new Person('Jan', 'Kowalski');
console.log(Person1.greeting());


// Customer constructor
function Customer(firstName, lastName, phone, membership) {
    // firstName and lastName are concurrent by coincident
    Person.call(this, firstName, lastName); 

    this.phone = phone;
    this.membership = membership;
}

// Inherit prototypes
Customer.prototype = Object.create(Person.prototype);

// Use Customer Constructor
Customer.prototype.constructor = Customer;

// Making separate greeting method for Customer
Customer.prototype.greeting = function() {
    return `Hello to our company ${this.firstName} ${this.lastName}!`;
}


// Create Customer
const Customer1 = new Customer("Alfred", "Michigan", "874255355", "premium");
console.log(Customer1);
console.log(Customer1.greeting());
2

Key quote from the above linked section:

But when do we need to perform last line here? Unfortunately the answer is - it depends.

Edit: Note the code you’ve posted is mainly there to explain how JS works rather than being an example of how you’d normally write JS code.

3

It’s still confusing to me. I was trying to understand the following code from MDN link that you provided:

CreatedConstructor.prototype.create = function create() {
  return new this.constructor();
}

new CreatedConstructor().create().create();

As far as I can tell return new this.constructor(); will result in creating new instance of CreatedConstructor right? But why would we use .create().create(); instead of just single .create()? As of now this is the biggest confusion for me.

EDIT: Is this called method chaining and it’s used to reduce repetition of the code? So instead of

new CreatedConstructor().create();
new CreatedConstructor().create();

we write

new CreatedConstructor().create().create();

That’s because I’m following a tutorial and I came to the moment that was confusing to me, so I asked for help, since even after reading MDN about this it’s still confusing to me.

4

I think I’ve found my answer on Stack Overflow: https://stackoverflow.com/a/20830553/7585847. This simply explained what was going on when inheriting. Also after reading this answer on StackOverflow I was able to better understand what is happening in code on MDN.

Also thanks @DanCouper for the link to MDN.