了解Javascript原型继承

Question

I am afraid to ask this question, as already there are so many on the same topic.

I am trying to understand cons/limitations of using approach-1 and approach-2

Simple Inheritance

 function Person(name, age) { this.name = name || "de-name"; this.age = !!Number(age) ? Number(age) : 0; } Person.prototype.setName = function(name) { this.name = name; return this; } function Student(name) { Person.call(this, name); // Copy instance properties of Person class this.title = "Student"; } // Suggested way Student.prototype = Object.create(Person.prototype); // Possible approach-1 // Student.prototype = Person.prototype; // Possible approach-2 // Student.prototype = new Person(); 

Answer 1

In prototype-based languages, inheritance is performed by cloning existing objects that serve as prototypes rather than having classes.

So in each case, we should think about the object selected to use as the prototype to figure out the behavior.

In approach 1, you're setting the prototype of Student to the same prototype object as Person . This means that any changes made to Student.prototype will affect Person.prototype and vice versa.

In approach 2, you're setting the prototype of Student to a new Person object that will have the following properties set {name: 'de-name', age: 0} according to your initialization code. The name property will then be overriden by your call to Person.call() in the Student function. Since this an entirely new object, any modifications to Student.prototype will only affect new Student objects, and any missing properties on this Person instance that serves as the prototype will be delegated to the Person.prototype .

To elaborate on that last bit (that missing properties are passed up the prototype chain), here's an example. Say we add a new method greet to Person :

Person.prototype.greet = function() { console.log("Hi! " + this.name; ) }

Calling new Student().greet() will have JavaScript check through the prototype chain until it hits the appropriate property (otherwise you get a not defined error.)

// Walking up the chain
/* 1 */ new Student()     // doesn't have a greet property
/* 2 */ Student.prototype // => Person {name: 'de-name', age: 0}
// This person instance doesn't have a greet property either
// because we instantiated it before adding the `greet` property
/* 3 */ Person.prototype  // Has a greet property which gets called

In the suggested pattern with Object.create , you're doing almost the same thing as Student.prototype = new Person() except that Object.create allows you to perform differential inheritance . You can even add additional properties as its second argument:

Student.prototype = Object.create(Person.prototype, {
  age: 16,
  study: function() { console.log("But I'm sooo lazy!!!"); } 
});

Answer 2

Approach 1 and Approach 2 are actually not the same, exactly. In approach 2, you're creating a new instance of Person , and assigning that new instance to the prototype of Student.

Additionally, you're supposed to do it this way:

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

According to MDN :

The Object.create() method creates a new object with the specified prototype object and properties.

So you don't assign it to the Student prototype, you assign it to the Student itself, and Student gets Person as its prototype.

Answer 3

approach-2 means one additional object in the prototype chain. If (new Student()).someAttr doesn't resolve in the student object ( new Student() ), with approach-2, the person object ( new Person() ) is checked (because that's what's in Student.prototype ), then Person.prototype . With approach-1, there's no person object.