как мы понимаем суть классов это повторное использование кода, в классе Виджет я описываю логику построения всех виджетов, в дочерних классах Кнопка и Лампа, я описываю только свойственную им логику, а логику построения виджета наследую от класса Виджет. КЭП.
<body></body>
<script>
var Widget = new Class( function ( parent ) {
this.HTMLElement = null;
this.__construct = function ( w, h, color ) {
this.HTMLElement = document.createElement( 'div' );
this.HTMLElement.style.position = 'relative';
this.HTMLElement.style.width = w + 'px';
this.HTMLElement.style.height = h + 'px';
this.HTMLElement.style.backgroundColor = color;
document.body.appendChild( this.HTMLElement );
};
} );
var Button = new Class( Widget, function ( parent ) {
this.action = null;
this.onclick = function () {if ( this.action )this.action()};
this.__construct = function ( w, h, color ) {
parent.__construct.call( this, w, h, color );
this.HTMLElement.onclick = this.onclick.bind( this );
};
} );
var Lamp = new Class( Widget, function ( parent ) {
this.state = false;
this.onColor = '';
this.offColor = '';
this.toggle = function () {
this.state = !this.state;
this.HTMLElement.style.backgroundColor = this[this.state ? 'onColor' : 'offColor'];
};
this.__construct = function ( size, onColor, offColor ) {
parent.__construct.call( this, size, size, offColor );
this.HTMLElement.style.borderRadius = size / 2 + 'px';
this.onColor = onColor;
this.offColor = offColor;
};
} );
var lamp = new Lamp( 100, '#ccc', '#444' );
var button = new Button( 100, 50, '#040' );
button.action = lamp.toggle.bind( lamp );
// собственно сама функция которая позволяет вытворять все эти чудеса
function Class( a, b ) {
var description = b ? b : a;
var superClass = b ? a : b;
var constructor = function () {if ( this['__construct'] )this['__construct'].apply( this, arguments )};
description.prototype = Object.create( superClass ? superClass.prototype : Class.base ? Class.base.prototype : Object.prototype );
constructor.prototype = new description( description.prototype );
return constructor;
}
</script>
