Что не так с наследованием?

Question

[Максим Иванов]

Вроде взял функцию Крокфорда, но может не уяснил саму суть, что не так в этом коде:

function extend(child, parent) {
    var emptyCtor = function() {};
    emptyCtor.prototype = parent.prototype;
    child.prototype = new emptyCtor;
    child._super = parent;
    return child;
};

var ParentClass = function() {
	this.a = 1;
};

var ChildClass = function() {};

ChildClass = extend(ChildClass, ParentClass);

var ch = new ChildClass;

document.body.innerHTML = ch.a; // undefined

Answer 1

[Андрей]

child.prototype копирует классы из объекта-прототипа parent
Поэтому надо записывать свойства в прототип классу ParentClass

Comments

[Максим Иванов]

то есть я просто перепутал аргументы? а почему тогда подписывают в прототипе именно передавать первым child, а вторым parent?

[Андрей]

Нет, Вы не перепутали аргументы.
Смотрите на строку: emptyCtor.prototype = parent.prototype;
здесь в прототип функции emptyCtor копируются все значения из прототипа parent

Когда Вы передаете ParentClass как аргумент, то происходит следующее:
в emptyCtor копируются свойства из прототипа ParentClass.
А там Ваших свойств нету! this.a - это не запись в прототип.

(Специально не пишу код, чтобы Вы поняли сам принцип, если будет совсем не понятно - напишите, я тогда решение приведу. )

[Максим Иванов]

Оказывается, надо было в дочернем классе вызывать конструктор базового класса
ChildClass._super.constructor.call(this)

[Максим Иванов]

jsfiddle.net/omaxphp/fun0hvou

Answer 2

[Максим Иванов]

function extend(child, parent) {
    var emptyCtor = function() {};
    emptyCtor.prototype = parent.prototype;
    child.prototype.constructor = child;
    child._super = parent.prototype; // fix
    return child;
};

var ParentClass = function() {
	this.a = 1;
};

var ChildClass = extend(function() {
	ChildClass._super.constructor.call(this) // call parent
  this.b = 2; // add new property
}, ParentClass);

var myObject = new ChildClass;

document.body.innerHTML = myObject.a + "<br>";   // 1
document.body.innerHTML += myObject.b + "<br>"; // 2

ES6

// наследование классов
// JavaScript был и остаётся 
// прототипно-ориентированным языком

class ParentClass {
  constructor() {                      // --------------
    this.a = 1                         //              |
  };                                   //              |
}                                      //              |
                                       //              |
class ChildClass extends ParentClass { //              |
  constructor() {                      //              |
    super(); // отнаследовали конструктор     <----
    this.b = 2; // add new property
  };
}

var myObject = new ChildClass();
document.body.innerHTML = myObject.a + "<br>";
document.body.innerHTML += myObject.b + "<br>";