Спасибо, попробую оба варианта
UPD: Попробовал. Наткнулся на сложности с множественным наследованием. Приведу наглядный пример:
function extend(Parent, Child) {
var F = function() { }
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.superclass = Parent.prototype;
}
// функция создания дива с классом и содержимым
function div(className, content){
var elem = document.createElement('DIV');
if (className) elem.className = className;
if (content) elem.innerHTML = content;
return elem;
}
// начинаем экспереметировать с наследованием по варианту 1 (не используем прототип, используем конструктор суперкласса в начале каждого класса-потомка)
function Parent(color){
this.container = div('container', 'empty');
this.container.style.background = color;
}
extend(Parent, Child = function(){
Child.superclass.constructor.apply(this, arguments);
this.header = div('header', 'Заголовок!');
this.container.appendChild(this.header);
});
extend(Child, GrandChild = function(){
GrandChild.superclass.constructor.apply(this, arguments);
this.message = div('messge', 'Сообщение!');
this.container.appendChild(this.message);
});
// вариант 2, все свойства и методы добавляются через прототип:
function P(color){
this.populate(color);
}
P.prototype = {
populate: function(color){
this.container = div('container', 'empty');
this.container.style.background = color;
}
} // пока всё нормально
function C(color){
this.populate(color);
if (this.func) this.func();
}
C.prototype = {
func: function(){
this.header = div('header', 'Заголовок!');
this.container.appendChild(this.header);
}
}
extend(P, C); // populate - наследуется, а вот к func в конструкторе доступа нет
function GC(color){
this.populate(color);
if (this.func) this.func();
this.message = div('messge', 'Сообщение!');
this.container.appendChild(this.message);
}
extend(C, GC); // func по прежнему недоступна, сама функция работает потому что все действия затолканы в конструктор
window.onload = function(){
document.body.appendChild(new Parent('#7777FF').container); // выводит только "empty"
document.body.appendChild(new Child('#9999FF').container); // выводит "empty" и "Заголовок!"
document.body.appendChild(new GrandChild('#BBBBFF').container); // "empty", "Заголовок!" и "Сообщение!"
document.body.appendChild(new P('#FF7777').container); // выводит только "empty"
document.body.appendChild(new C('#FF9999').container); // выводит только "empty"
document.body.appendChild(new GC('#FFbbbb').container); // выводит "empty" и "Сообщение!"
}