上面的問題只是簡單的解決了多余屬性和 constructor 丟失的問題，而 supper 問題仍然沒有改進(jìn)。

舉個(gè)栗子，來看看 supper 的重要，每個(gè)人都會(huì)睡覺，sleep 函數(shù)是人的一個(gè)屬性，學(xué)生分為小學(xué)生和大學(xué)生，小學(xué)生晚上 9 點(diǎn)睡覺，大學(xué)生 12 點(diǎn)睡覺，于是：

Person.prototype.Sleep = function(){ 
  console.log('Sleep!'); 
} 
function E_Student(){}; //小學(xué)生 
function C_Student(){}; //大學(xué)生 
classInherit(E_Student, Person); 
classInherit(C_Student, Person); 
//重寫 Sleep 方法 
E_Student.prototype.Sleep = function(){ 
  console.log('Sleep!'); 
  console.log('Sleep at 9 clock'); 
} 
C_Student.prototype.Sleep = function(){ 
  console.log('Sleep!'); 
  console.log('Sleep at 12 clock'); 
}  

對(duì)于 Sleep 方法，顯得比較混亂，而我們想要通過 supper，直接調(diào)用父類的函數(shù)：

E_Student.prototype.Sleep = function(){ 
  this._supper(); //supper 方法 
  console.log('Sleep at 9 clock'); 
} 
C_Student.prototype.Sleep = function(){ 
  this._supper(); //supper 方法 
  console.log('Sleep at 12 clock'); 
}  

不知道對(duì) supper 的理解正不正確，總感覺怪怪的，歡迎指正!

來看下 JQuery 之父是如何 class 的面向?qū)ο螅脑谶@，源碼如下。

/* Simple JavaScript Inheritance 
 * By John Resig http://ejohn.org/ 
 * MIT Licensed. 
 */ 
// Inspired by base2 and Prototype 
(function(){ 
  // initializing 開關(guān)很巧妙的來實(shí)現(xiàn)調(diào)用原型而不構(gòu)造，還有回掉 
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; 
  // The base Class implementation (does nothing) 
  // 全局，this 指向 window，***的父類 
  this.Class = function(){}; 
  
  // Create a new Class that inherits from this class 
  // 繼承的入口 
  Class.extend = function(prop) { 
    //保留當(dāng)前類，一般是父類的原型 
    var _super = this.prototype; 
    
    // Instantiate a base class (but only create the instance, 
    // don't run the init constructor) 
    //開關(guān) 用來使原型賦值時(shí)不調(diào)用真正的構(gòu)成流程 
    initializing = true; 
    var prototype = new this(); 
    initializing = false; 
    
    // Copy the properties over onto the new prototype 
    for (var name in prop) { 
      // Check if we're overwriting an existing function 
      //對(duì)函數(shù)判斷，將屬性套到子類上 
      prototype[name] = typeof prop[name] == "function" && 
        typeof _super[name] == "function" && fnTest.test(prop[name]) ? 
        (function(name, fn){ 
          //用閉包來存儲(chǔ) 
          return function() { 
            var tmp = this._super; 
            
            // Add a new ._super() method that is the same method 
            // but on the super-class 
            this._super = _super[name]; 
            
            // The method only need to be bound temporarily, so we 
            // remove it when we're done executing 
            //實(shí)現(xiàn)同名調(diào)用 
            var ret = fn.apply(this, arguments);   
            this._super = tmp; 
            return ret; 
          }; 
        })(name, prop[name]) : 
        prop[name]; 
    } 
    
    // 要返回的子類 
    function Class() { 
      // All construction is actually done in the init method 
      if ( !initializing && this.init ) 
        this.init.apply(this, arguments); 
    } 
    //前面介紹過的，繼承 
    Class.prototype = prototype; 
    
    Class.prototype.constructor = Class; 
  
    Class.extend = arguments.callee; 
    
    return Class; 
  }; 
})();  

這個(gè)時(shí)候就可以很輕松的實(shí)現(xiàn)面向?qū)ο?，使用如下?/p>

var Person = Class.extend({ 
  init: function(name){ 
    this.name = name; 
  }, 
  Say: function(name){ 
    console.log(this.name + ' can Say!'); 
  }, 
  Sleep: function(){ 
    console.log(this.name + ' can Sleep!'); 
  } 
}); 
var Student = Person.extend({ 
  init: function(name){ 
    this._super('Student-' + name); 
  }, 
  Sleep: function(){ 
    this._super(); 
    console.log('And sleep early!'); 
  }, 
  DoHomeWork: function(){ 
    console.log(this.name + ' can do homework!'); 
  } 
}); 
var p = new Person('Li'); 
p.Say(); //'Li can Say!' 
p.Sleep(); //'Li can Sleep!' 
var ming = new Student('xiaoming'); 
ming.Say(); //'Student-xiaoming can Say!' 
ming.Sleep();//'Student-xiaoming can Sleep!' 
            // 'And sleep early!' 
ming.DoHomeWork(); //'Student-xiaoming can do homework!'  

除了 John Resig 的 supper 方法，很多人都做了嘗試，不過我覺得 John Resig 的實(shí)現(xiàn)方式非常的妙，也比較貼近 supper 方法，我本人也用源碼調(diào)試了好幾個(gè)小時(shí)，才勉強(qiáng)能理解。John Resig 的頭腦真是令人佩服。

ES6 中的 class

在 JS 中，class 從一開始就屬于關(guān)鍵字，在 ES6 終于可以使用 class 來定義類。比如：

class Point { 
  constructor(x, y){ 
    this.x = x; 
    this.y = y; 
  } 
  toString(){ 
    return '(' + this.x + ',' + this.y + ')'; 
  } 
} 
var p = new Point(3, 4); 
console.log(p.toString()); //'(3,4)'  

更多有關(guān)于 ES6 中類的使用請(qǐng)參考阮一峰老師的 Class基本語法。

其實(shí) ES6 中的 class 只是寫對(duì)象原型的時(shí)候更方便，更像面向?qū)ο?，class 的功能 ES5 完全可以做到，比如就上面的例子：

typeof Point; //'function' 
Point.prototype; 
/* 
|Object 
|--> constructor: function (x, y) 
|--> toString: function() 
|--> __proto__: Object 
*/  

和用 ES5 實(shí)現(xiàn)的真的沒有什么差別，反而現(xiàn)在流行的一些庫比 ES6 的 class 能帶來更好的效益。

回到最開始的組件問題

那么，說了這么多面向?qū)ο?，現(xiàn)在回到最開始的那個(gè)組件的實(shí)現(xiàn)——如何用面向?qū)ο髞韺?shí)現(xiàn)。

還是利用 John Resig 構(gòu)造 class 的方法：

var JudgeInput = Class.extend({ 
  init: function(config){ 
    this.input = document.getElementById(config.id); 
    this._bind(); 
  }, 
  _getValue: function(){ 
    return this.input.value; 
  }, 
  _render: function(){ 
    var value = this._getValue(); 
    if(!document.getElementById("show")){ 
      var append = document.createElement('span'); 
      append.setAttribute("id", "show"); 
      input.parentNode.appendChild(append); 
    } 
    var show = document.getElementById("show"); 
    if(/^[0-9a-zA-Z]+$/.exec(value)){ 
      show.innerHTML = 'Pass!'; 
    }else{ 
      show.innerHTML = 'Failed!'; 
    } 
  }, 
  _bind: function(){ 
    var self = this; 
    self.input.addEventListener('keyup', function(){ 
      self._render(); 
    }); 
  } 
}); 
window.onload = function(){ 
  new JudgeInput({id: "input"}); 
}  

但是，這樣子，基本功能算是實(shí)現(xiàn)了，關(guān)鍵是不好擴(kuò)展，沒有面向?qū)ο蟮木琛Ｋ裕槍?duì)目前的情況，我們準(zhǔn)備建立一個(gè) Base 基類，init 表示初始化，render 函數(shù)表示渲染，bind 函數(shù)表示綁定，destory 用來銷毀，同時(shí) get、set 方法提供獲得和更改屬性：

var Base = Class.extend({ 
  init: function(config){ 
    this._config = config; 
    this.bind(); 
  }, 
  get: function(key){ 
    return this._config[key]; 
  }, 
  set: function(key, value){ 
    this._config[key] = value; 
  }, 
  bind: function(){ 
    //以后構(gòu)造 
  }, 
  render: function(){ 
    //以后構(gòu)造 
  }, 
  destory: function(){ 
    //定義銷毀方法 
  } 
});  

基于這個(gè) Base，我們修改 JudgeInput 如下：

var JudgeInput = Base.extend({ 
  _getValue: function(){ 
    return this.get('input').value; 
  }, 
  bind: function(){ 
    var self = this; 
    self.get('input').addEventListener('keyup', function(){ 
      self.render(); 
    }); 
  }, 
  render: function(){ 
    var value = this._getValue(); 
    if(!document.getElementById("show")){ 
      var append = document.createElement('span'); 
      append.setAttribute("id", "show"); 
      input.parentNode.appendChild(append); 
    } 
    var show = document.getElementById("show"); 
    if(/^[0-9a-zA-Z]+$/.exec(value)){ 
      show.innerHTML = 'Pass!'; 
    }else{ 
      show.innerHTML = 'Failed!'; 
    } 
  } 
}); 
window.onload = function(){ 
  new JudgeInput({input: document.getElementById("input")}); 
}  

比如，我們后期修改了判斷條件，只有當(dāng)長度為 5-10 的時(shí)候才會(huì)返回 success，這個(gè)時(shí)候能很快定位到 JudgeInput 的 render 函數(shù)：

render: function(){ 
  var value = this._getValue(); 
  if(!document.getElementById("show")){ 
    var append = document.createElement('span'); 
    append.setAttribute("id", "show"); 
    input.parentNode.appendChild(append); 
  } 
  var show = document.getElementById("show"); 
  //修改正則即可 
  if(/^[0-9a-zA-Z]{5,10}$/.exec(value)){ 
    show.innerHTML = 'Pass!'; 
  }else{ 
    show.innerHTML = 'Failed!'; 
  } 
}  

以我目前的能力，只能理解到這里了。

總結(jié)

從一個(gè)組件出發(fā)，一步一步爬坑，又跑去介紹 JS 中的面向?qū)ο螅绻隳芸吹?**，那么你就可動(dòng)手一步一步實(shí)現(xiàn)一個(gè) JQuery 了，純調(diào)侃。

關(guān)于一個(gè)組件的寫法，從入門級(jí)到最終版本，一波三折，不僅要考慮代碼的實(shí)用性，還要兼顧后期維護(hù)。JS 中實(shí)現(xiàn)面向?qū)ο?，剛接觸 JS 的時(shí)候，我能用簡單的原型鏈來實(shí)現(xiàn)，后來看了一些文章，發(fā)現(xiàn)了不少問題，在看 John Resig 的 Class，感觸頗深。還好，現(xiàn)在目的是實(shí)現(xiàn)了，共勉!