在JavaScript中创建派生类的多个实例

Question

Can someone tell the difference between how the following set of code is getting executed in depth.

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

Person.prototype.getName = function(){
   return this.name;
}

function Employee(designation){
   this. designation = designation;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.getDesignation = function(){
   return this.designation;
}

var employee1= new Employee("Cons");
console.log(employee1.getName()+ " --- "+ employee1.designation); 
// Jagadish --- Cons

var employee2= new Employee("Dev");
console.log(employee2.getName()+ " --- "+ employee2.designation);
// Jagadish --- Dev

My doubt is how should i change my code such that for every instance of Employee class i will have a different name.

Edit:

I know that i should call Person constructor but my doubt is. Let me put the two methods of code.

Method 1:

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

Person.prototype.getName = function(){
    return this.name;
}

function Employee(name, designation){
    //Person.call(this, name);
    this. designation = designation;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.getDesignation = function(){
    return this.designation;
}

new Employee("Jagadish", "Cons");

Fig 1:

Method 2:

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

Person.prototype.getName = function(){
    return this.name;
}

function Employee(name, designation){
    Person.call(this, name);
    this. designation = designation;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.getDesignation = function(){
    return this.designation;
}

new Employee("Jagadish", "Cons");

Fig 2:

My doubt is in Method 1 we don't have name property because we have not called Person constructor. But in Method 2 we have name property because we called Person constructor. But why name property is assigned to Employee object instead of Person.

Answer 1

function Person(name){
  this.name = name; // Update your Person class to accept a name
}

Person.prototype.getName = function(){
   return this.name;
}

function Employee(name, designation){
   this. designation = designation;
   Person.call(this, name); // Update Employee to accept a name and call super
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.getDesignation = function(){
   return this.designation;
}

var employee1= new Employee("Sue", "Cons");
console.log(employee1.getName()+ " --- "+ employee1.designation); 
// Sue --- Cons

var employee2= new Employee("Bob", "Dev");
console.log(employee2.getName()+ " --- "+ employee2.designation);
// Bob --- Dev

Answer 2

Firstly, your person object hard-codes your name, change the constructor to accept names:

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

Now for the tricky part, in the Employee constructor, you need to call the "super" class - the class it inherits from. this is a bit weird in javascript:

function Employee(name, designation){
   Person.call(this, name); // call Person constructor to set name
   this.designation = designation;
}

Creating anew Employee would now be done like this:

employee1 = new Employee('John', 'Manager')