JavaScript原型继承

Question

I don't understand something>Let's take a look at MDN's example:

function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price < 0) {
    throw RangeError('Cannot create product ' +
                      this.name + ' with a negative price');
  }

  return this;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

Food.prototype = Object.create(Product.prototype);
Food.prototype.constructor = Food; // Reset the constructor from Product to Food

Why I must write this part:

Food.prototype = Object.create(Product.prototype);
    Food.prototype.constructor = Food;

Isn't the Product.call(this, name, price); already copied that property(Prototype) from Product to Food?

Answer 1

This is just how you do pseudoclassical instantiation of a class in JavaScript. Lets first see what happens when you just do the first part, but lets add a bit for clarification:

function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price < 0) {
    throw RangeError('Cannot create product ' +
                      this.name + ' with a negative price');
  }

  return this;
}

Product.prototype.declare = function () {
  console.log('I like ' + this.name);
} 

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

Run this in a console and and run console.dir(Product) vs console.dir(Food) . Food has some of the same properties as Product. However, Food doesn't have access to the method "declare" that is on Product 's prototype. Thus, we need to set Food 's prototype. Run this in console after the above code:

Food.prototype = Object.create(Product.prototype);

run console.dir for Food again. Now, Food has a prototype that has the same properties/methods as Product . However, the prototype's constructor is now 'Product'. The last step to fix this is setting Food.prototype.constructor so Food 's constructor is once again Food , but with all of the properties/methods of Product .

Food.prototype.constructor = Food;

It's a strange but logical process to attaining full inheritance with pseudoclassical instantiation in JavaScript.