上面的問(wèn)題只是簡(jiǎn)單的解決了多余屬性和 constructor 丟失的問(wèn)題，而 super 問(wèn)題仍然沒(méi)有改進(jìn)。

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

Person.prototype.Sleep = function(){
  console.log("Sleep!");
}
function E_Student(){}; //小學(xué)生
function C_Student(){}; //大學(xué)生
classInherit(E_Student, Person);
classInherit(C_Student, Person);
//重寫(xiě) 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 方法，顯得比較混亂，而我們想要通過(guò) super，直接調(diào)用父類(lèi)的函數(shù)：

E_Student.prototype.Sleep = function(){
  this._super(); //super 方法
  console.log("Sleep at 9 clock");
}
C_Student.prototype.Sleep = function(){
  this._super(); //super 方法
  console.log("Sleep at 12 clock");
}

不知道對(duì) super 的理解正不正確，總感覺(jué)怪怪的，歡迎指正！

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

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
(function(){
  // initializing 開(kāi)關(guān)很巧妙的來(lái)實(shí)現(xiàn)調(diào)用原型而不構(gòu)造，還有回掉
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /_super/ : /.*/;
  // The base Class implementation (does nothing)
  // 全局，this 指向 window，最大的父類(lèi)
  this.Class = function(){};
 
  // Create a new Class that inherits from this class
  // 繼承的入口
  Class.extend = function(prop) {
    //保留當(dāng)前類(lèi)，一般是父類(lèi)的原型
    var _super = this.prototype;
   
    // Instantiate a base class (but only create the instance,
    // don"t run the init constructor)
    //開(kāi)關(guān) 用來(lái)使原型賦值時(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ù)判斷，將屬性套到子類(lèi)上
      prototype[name] = typeof prop[name] == "function" &&
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          //用閉包來(lái)存儲(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];
    }
   
    // 要返回的子類(lèi)
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }
    //前面介紹過(guò)的，繼承
    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 的 super 方法，很多人都做了嘗試，不過(guò)我覺(jué)得 John Resig 的實(shí)現(xiàn)方式非常的妙，也比較貼近 super 方法，我本人也用源碼調(diào)試了好幾個(gè)小時(shí)，才勉強(qiáng)能理解。John Resig 的頭腦真是令人佩服。

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

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 中類(lèi)的使用請(qǐng)參考阮一峰老師的 Class基本語(yǔ)法。

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

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

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

那么，說(shuō)了這么多面向?qū)ο?，現(xiàn)在回到最開(kāi)始的那個(gè)組件的實(shí)現(xiàn)——如何用面向?qū)ο髞?lái)實(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ò)展，沒(méi)有面向?qū)ο蟮木?。所以，針?duì)目前的情況，我們準(zhǔn)備建立一個(gè) Base 基類(lèi)，init 表示初始化，render 函數(shù)表示渲染，bind 函數(shù)表示綁定，destory 用來(lái)銷(xiāo)毀，同時(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(){
    //定義銷(xiāo)毀方法
  }
});

基于這個(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)長(zhǎ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!";
  }
}

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

從一個(gè)組件出發(fā)，一步一步爬坑，又跑去介紹 JS 中的面向?qū)ο?，如果你能看到最后，那么你就可?dòng)手一步一步實(shí)現(xiàn)一個(gè) JQuery 了，純調(diào)侃。

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

制作組件的例子
javascript oo實(shí)現(xiàn)
John Resig: Simple JavaScript Inheritance

歡迎來(lái)我博客一起交流。

2016-11-13

經(jīng)指正，已經(jīng)將錯(cuò)誤的 supper 改成 super。