YDKJS: Object and Prototypes
Chapter 6. Behavior Delegation
There are ways for JavaScript to behave like object-oriented language — by rewriting .constructor and .prototype properties.
As far as I get — JS doesn’t like classes, types, any kind of pre-done/work, any thing like “I’ll go to the gym for three months, after that Mart will love me”. Nope, in JavaScript Mary should marry you today, at midnight tops, no time to explain, user is waiting for the page to load.
I’ll show two examples of code doing the same thing — one with object-oriented code style and one with object delegation.
OO style
// Parent class
function Widget(width,height) {
this.width = width || 50;
this.height = height || 50;
this.$elem = null;
}
Widget.prototype.render = function($where){
if (this.$elem) {
this.$elem.css( {
width: this.width + “px”,
height: this.height + “px”
} ).appendTo( $where );
}
};
// Child class
function Button(width,height,label) {
// “super” constructor call
Widget.call( this, width, height );
this.label = label || “Default”;
this.$elem = $( “<button>” ).text( this.label );
}
// make `Button` “inherit” from `Widget`
Button.prototype = Object.create( Widget.prototype );
// override base “inherited” `render(..)`
Button.prototype.render = function($where) {
// “super” call
Widget.prototype.render.call( this, $where );
this.$elem.click( this.onClick.bind( this ) );
};
Button.prototype.onClick = function(evt) {
console.log( “Button ‘” + this.label + “’ clicked!” );
};
$( document ).ready( function(){
var $body = $( document.body );
var btn1 = new Button( 125, 30, “Hello” );
var btn2 = new Button( 150, 40, “World” );
btn1.render( $body );
btn2.render( $body );
} );
Object delegation style
var Widget = {
init: function(width,height){
this.width = width || 50;
this.height = height || 50;
this.$elem = null;
},
insert: function($where){
if (this.$elem) {
this.$elem.css( {
width: this.width + “px”,
height: this.height + “px”
} ).appendTo( $where );
}
}
};
var Button = Object.create( Widget );
Button.setup = function(width,height,label){
// delegated call
this.init( width, height );
this.label = label || “Default”;
this.$elem = $( “<button>” ).text( this.label );
};
Button.build = function($where) {
// delegated call
this.insert( $where );
this.$elem.click( this.onClick.bind( this ) );
};
Button.onClick = function(evt) {
console.log( “Button ‘” + this.label + “’ clicked!” );
};
$( document ).ready( function(){
var $body = $( document.body );
var btn1 = Object.create( Button );
btn1.setup( 125, 30, “Hello” );
var btn2 = Object.create( Button );
btn2.setup( 150, 40, “World” );
btn1.build( $body );
btn2.build( $body );
} );
I do love the second one.
NB. For the functions in the Button object they created new names instead of reusing the old ones. This helps to create better maintainable code.
