YDKJS: Object and Prototypes

Chapter 6. Behavior Delegation

Natalia Konovalova
Jul 25, 2017 · 2 min read

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.

Natalia Konovalova

Written by

Just an IT girl trying to do her best

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade