Наследование JavaScript с прототипами - свойство "конструктор"?

Ответ 1

Давайте немного рассмотрим ваш код.

function Food(){}
function Bread(){}
function Sushi(){}
var basicFood = new Food();
Bread.prototype = basicFood;
Sushi.prototype = basicFood;

Примечание.. Когда вы устанавливаете тот же объект, что и прототип двух объектов, добавление в один прототип будет отражено и в другом прототипе. Например,

Bread.prototype = basicFood;
Sushi.prototype = basicFood;
Bread.prototype.testFunction = function() {
    return true;
}
console.log(Sushi.prototype.testFunction()); // true

Давайте вернемся к вашим вопросам.

var bread = reconstructify(new Bread(), Bread);
var sushi = reconstructify(new Sushi(), Sushi);
console.log(sushi instanceof Bread);    // Why true?
console.log(bread instanceof Sushi);    // Why true?

В соответствии с instanceof docs из MDN,

Оператор instanceof проверяет, имеет ли объект в своей прототипной цепочке свойство прототипа конструктора.

Итак, когда мы делаем что-то вроде

object1 instanceof object2

JavaScript попытается найти, если прототип object2 находится в цепочке прототипов object1.

В этом случае он вернет true только тогда, когда Bread.prototype находится в цепочке прототипов sushi. Мы знаем, что sushi строится из sushi. Таким образом, потребуется прототип sushi и проверьте, соответствует ли он прототипу Bread. Поскольку они оба указывают на тот же объект basicFood, который возвращает true. В том же случае для bread instanceof Sushi.

Итак, правильный способ наследования будет таким, как этот

function Food()  {}
function Bread() {}
function Sushi() {}

Bread.prototype = Object.create(Food.prototype);
Bread.prototype.constructor = Bread;
Sushi.prototype = Object.create(Food.prototype);
Sushi.prototype.constructor = Sushi;

var bread = new Bread();
var sushi = new Sushi();

console.log(sushi instanceof Bread);  // false
console.log(bread instanceof Sushi);  // false
console.log(sushi.constructor);       // [Function: Sushi]
console.log(bread.constructor);       // [Function: Bread]
console.log(sushi instanceof Food);   // true
console.log(bread instanceof Food);   // true
console.log(sushi instanceof Sushi);  // true
console.log(bread instanceof Bread);  // true

Ответ 2

Единственная проблема в вашей логике - установить те же объекты basicFood как для Bread.prototype, так и для Sushi.prototype. Попробуйте сделать что-то вроде этого:

Bread.prototype = new Food();
Bread.prototype.constructor = Bread;

Sushi.prototype = new Food();
Sushi.prototype.constructor = Sushi;

Теперь instanceof bread и sushi будут Food, но конструкторы будут bread и sushi для каждого из них в частности:

Ответ 3

Это мое личное решение, которое я разработал из объединенных набросков мудрости @thefourtheye, @FelixKling, @SeanKinsey и даже выходки из @helly0d:

Простейшее решение:

/** Food Class -- You can bite all foods **/
function Food(){ this.bites = 0 };
Food.prototype.bite = function(){ console.log("Yum!"); return this.bites += 1 };

/** All Foods inherit from basicFood **/
var basicFood = new Food();

/** Bread inherits from basicFood, and can go stale **/
function Bread(){
  Food.apply(this); // running food constructor (defines bites)
  this.stale = false;
};
Bread.prototype = Object.create( basicFood );
Bread.prototype.constructor = Bread; // just conventional
Bread.prototype.goStale = function(){ return this.stale = true };

/** Sushi inherits from basicFood, and can be cooked **/
function Sushi(){
  Food.apply(this);
  this.raw = true;
};
Sushi.prototype = Object.create( basicFood );
Sushi.prototype.constructor = Sushi;
Sushi.prototype.cook = function(){ return this.raw = false };

<ч/ " >

Расширенная методология:

Это лучше, потому что свойство прототипа constructor не перечислимо.

/** My handy-dandy extend().to() function **/
function extend(source){
  return {to:function(Constructor){
    Constructor.prototype = Object.create(source);
    Object.defineProperty(Constructor.prototype, 'constructor', {
      enumerable:   false,
      configurable: false,
      writable:     false,
      value:        Constructor
    });
    return Constructor;
  }}
};


function Food(){ this.bites = 0 };
Food.prototype.bite = function(){ console.log("Yum!"); return this.bites += 1 };
var basicFood = new Food();


var Bread = extend(basicFood).to(function Bread(){
  Food.apply(this);
  this.stale = false;
});
Bread.prototype.goStale = function(){ return this.stale = true };


var Sushi = extend(basicFood).to(function Sushi(){
  Food.apply(this);
  this.raw = true;
});
Sushi.prototype.cook = function(){ return this.raw = false };

<ч/ " >

Обе методологии выше дают одни и те же результаты:

var food  = new Food();
var bread = new Bread();
var sushi = new Sushi();

console.log( food instanceof Food );   // true
console.log( food instanceof Bread );  // false
console.log( food instanceof Sushi );  // false

console.log( bread instanceof Food );  // true
console.log( bread instanceof Bread ); // true
console.log( bread instanceof Sushi ); // false

console.log( sushi instanceof Food );  // true
console.log( sushi instanceof Bread ); // false
console.log( sushi instanceof Sushi ); // true

console.log( food.constructor );       // Food
console.log( bread.constructor );      // Bread
console.log( sushi.constructor );      // Sushi

<ч/ " >

Особая благодарность @FelixKling, чей опыт помог отточить мое понимание в чате за пределами этой темы - также к @thefourtheye, который первым показал мне правильный путь, а также @SeanKinsey, который подчеркнула полезность возможности запуска родительского конструктора в контексте дочерних элементов.

Сообщество wiki'd ответьте - пожалуйста, дайте мне знать или отредактируйте себя, если вы найдете что-нибудь в этом ответе, который является подозрительным:)

Ответ 4

То, что вы делаете неправильно, - это повторно использовать объект basicFood для нескольких дочерних классов. Вместо этого новый новый. Таким образом, когда вы добавляете членов в прототип (новый экземпляр родителя), вы добавляете его в экземпляр, который не используется совместно с другими наследующими классами.

Теперь есть одна вещь, которой не хватает ваш код, и это конструкторы без побочных эффектов. Многим конструкторам нужны аргументы, и они будут бросать без них, но как вы можете создать прототип для нового нисходящего класса без создания родительского элемента? Ну, нас действительно не интересует родительская функция, только в прототипе родителей. Итак, что вы можете сделать, это

function Parent() { /*some side effect or invariant */ }
Parent.prototype.foo = ...
function Child() { Parent.call(this); }

// the next few lines typically go into a utility function
function F() {} // a throw-away constructor
F.prototype = Parent.prototype; // borrow the real parent prototype
F.prototype.constructor = Parent; // yep, we're faking it
Child.prototype = new F(); // no side effects, but we have a valid prototype chain
Child.prototype.bar = ... // now continue adding to the new prototype