Javascript inheritance: calling Object.create when setting a prototype - Stack Overflow

admin管理员组

文章数量:1332361

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;

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;

• javascript
• prototype
• prototype-programming

Share Improve this question Follow edited Jan 11, 2017 at 16:50 shriek 5,84388 gold badges5252 silver badges8383 bronze badges asked Feb 23, 2013 at 20:08 dragonflydragonfly 17.8k3131 gold badges114114 silver badges227227 bronze badges 3

• 2 A great answer to this from today. – marekful Commented Feb 23, 2013 at 20:16
• wow. thanks for that. bookmarked for study! :-) – james emanon Commented Feb 23, 2013 at 20:21
• No. – Bergi Commented Feb 23, 2013 at 22:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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;

My guess is that the intent is to create a new object rather than just a reference from Person.

//create a new object with its prototype assigned to Person.prototype
Employee.prototype = Object.create(Person.prototype);

本文标签： Javascript inheritance calling Objectcreate when setting a prototypeStack Overflow