Javascript inheritance: calling Object.create when setting a prototype

Question

I'm learning some aspects of Object-oriented Javascript. I came across this snippet

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

Object.defineProperties(Person.prototype, {
  sayHi: {
    value: function() {
      return "Hi my name is " + this.firstName;
    }
  },
  fullName: {
    get: function() {
      return this.firstName + " " + this.lastName;
    }
  }
});

var Employee = function(firstName, lastName, position) {
  Person.call(this, firstName, lastName);
  this.position = position;
};

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

var john = new Employee("John", "Doe", "Dev");

And my question is: why does this snippet use Object.create(Person.prototype)? Shouldn't we simply reset prototype with:

Employee.prototype = Person.prototype;

Answer 1

Doing Employee.prototype = Person.prototype is like saying "Employee is Person" rather than "Employee is a Person." Any changes to either prototype will be reflected in both classes.

Here's a demonstration. Obviously we don't want our Persons working because they don't have a position.

So the right way to setup the prototype chain without Object.create is:

Employee.prototype = new Person;

But this requires instantiating an object, which is a little funky -- especially if you don't want Person's constructor to be called. All of your Employee instances are going to inherit undefined "firstName" and "lastName" properties, regardless of whether you wanted that.

In this case it's no big deal -- the Employee constructor is going to set those properties on itself which will supersede the properties inherited from Person. But consider this example. One might think that freeTime is an instance level property for Person that will not be copied because it's not on the prototype. Plus, we never called the Person constructor from Employee. Not so -- freeTime was set on the Employee prototype because we had to instantiate an object.

So the best and cleanest inheritance you can do is through Object.create. If you want to call the parent class' constructor, you can do so explicitly from within the subclass' constructor. Another nice thing is that Object.create has a second (optional) argument to defineProperties. So you can also do this:

Employee.prototype = Object.create(Person.prototype, {
  work: {
    value: function() {
      return this.fullName+" is doing some "+this.position+" stuff");  
    }
  }
});

Of course, if you have to support legacy browsers you can't use Object.create. The alternative is to use clone / extend from libraries like underscore or lodash. Or there's this little dance:

var subclass = function() { };
subclass.prototype = Person.prototype;
Employee.prototype = new subclass;