JS类风格，class，对象关联风格委托代码区别

习惯了面向对象设计模式，所以很快会想到一个包含所有通用控件行为的父类
（可能叫作 Widget ）和继承父类的特殊控件子类（比如 Button ）。

1.纯JavaScript 实现类风格

下面这段代码展示的是如何在不使用任何“类”辅助库或者语法的情况下，使用纯
JavaScript 实现类风格的代码：

// 父类
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) {
  // 调用“super”构造函数
  Widget.call( this, width, height );
  this.label = label || "Default";
  this.$elem = $( "<button>" ).text( this.label );
}
// 让 Button“继承”Widget
Button.prototype = Object.create( Widget.prototype );
// 重写 render(..)
Button.prototype.render = function($where) {
  // “super”调用
  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 );
} );

2.ES6的 class 语法糖

这里简单介绍一下如何使用 class 来实现相同的功能：

class Widget {
  constructor(width,height) {
    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( $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, "Hello" );
  var btn2 = new Button( 150, 40, "World" );
  
  btn1.render( $body );
  btn2.render( $body );
} );

3.委托控件对象

下面的例子使用对象关联风格委托来更简单地实现 Widget / Button ：

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){
  // 委托调用
  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, "Hello" );
  var btn2 = Object.create( Button );
  btn2.setup( 150, 40, "World" );
  
  btn1.build( $body );
  btn2.build( $body );
} );