[js extend] basic js extend method

es6.js

class Widget {
  constructor(width, height, label) {
    this.width = width || 50;
    this.height = height || 50;
    this.$elem = null;
  }

  render($where){
    if(this.$elem) {
      this.$elem.css({
        width: this.width + 'px',
        height: this.height + 'px'
      }).appendTo($where)
    } 
  }
}

class Button extends Widget {
  constructor(width, height, label) {
    super(width, height);
    this.label = label || 'Default';
    this.$elem = $("<button>").text(this.label); 
  }

  render($where) {
    super.render($where);
    this.$elem.click(this.onClick.bind(this));
  }

  onClick(evt) {
    console.log("Button '" + this.label + "' clicked!" );
  };
}

$(document).ready( function(){
  var $body = $( document.body );
  var btn1 = new Button( 125, 30, "Hello1" ); 
  var btn2 = new Button( 150, 40, "World1" );
  btn1.render( $body );
  btn2.render( $body );
} );

extend.js

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)
  }
}

function Button(width, height, label) {
  Widget.call(this, width, height);
  this.label = label || 'Default';
  this.$elem = $("<button>").text(this.label);
}

Button.prototype = Object.create(Widget.prototype);
Button.prototype.render = function($where) {
  Widget.prototype.render.call(this, $where);
  this.$elem.click(this.onClick.bind(this));
};
Button.prototype.onClick = function(evt) {
  console.log("Button '" + this.label + "' clicked!" );
};

prototype.js

var Widget = {
  init(width, height) {
    this.width = width;
    this.height = height;
    this.$elem = null;
  },
  insert($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) {
  this.init(width, height);
  this.label = label || 'Default';
  this.$elem = $("<button>").text(this.label); 
}

Button.build = function($where) {
  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, "Hello2")
  var btn2 = Object.create(Button);
  btn2.setup(125, 40, "world2");
  btn1.build($body); 
  btn2.build($body)
})