JavaScript Prototype 属性窃取/继承

Question

Is this the correct way to do prototype inheritance and property 'stealing??'/inheritance. I want to inherit all properties from the Person constructor + all methods.

function Product(name, price) {
    this.name = name;
    this.price = price;
}
Product.prototype.tellMe = function() {
    console.log('Name = ' + this.name + ', Price = ' + this.price);
}

function Food(name, price, category) {
    Product.call(this, name, price);
    this.category = category;
}
Food.prototype = Object.create(Product.prototype);
Food.prototype.constructor = Food;

var b = new Food('Name', 123, 'Category');
console.log(b);
b.tellMe();
var a = new Product('Name2', 321);
console.log(a);

I would appreciate if you could give me a good example. Thanks!

Answer 1

Yes, that is the right way to use the constructor/prototype (aka pseudo-classical) pattern.

By reassigning Food.prototype to reference an object that inherits from Product.prototype you achieve access to all the methods that are defined in it for all the instances of Food . And by calling the Product.call(this, name, price) you add the properties name and price in the newly created objects.

The difference is that the properties are going to be "own" properties of the Food objects (they're going to actually be inside the b object, for example), whereas the methods are available to them through prototypal delegation. That is, the instances of Food are going to delegate the method calls to their prototype, Food.prototype , which in turn will delegate the calls to its prototype, Product.prototype .

Put in plain words, JS will search for tellMe in b and since it can't find it in there, it searches for it in its prototype Food.prototype . It's not in there either, so it moves up to its prototype Product.prototype where it finally finds that method and executes it.