日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

1. 沒有實現(xiàn)傳統(tǒng)面向?qū)ο笤撚械?super 方法來調(diào)用父類方法，鏈式和 super 方法相比還是有一定缺陷的;
2. 造成過多的原型屬性(name)，constructor 丟失(constructor 是一個非常重要的屬性，MDN)。

因為鏈式是一層層向上尋找，知道找到為止，很明顯 super 直接調(diào)用父類更具有優(yōu)勢。

 
 

  
  
// 多了原型屬性
  
  
console.log(ming.__proto__) // {name: undefined} 
 
 

為什么會多一個 name，原因是因為我們執(zhí)行了 Student.prototype = new Person();，而 new 的第三步會執(zhí)行一個 call 的函數(shù)，會使得 Student.prototype.name = undefined，恰好 ming.__proto__ 指向 Student 的 prototype，用了 new 是無法避免的。

 
 

  
  
// 少了 constructor
  
  

  
  
console.log(ming.constructor == Person) //true
  
  

  
  
console.log(ming.constructor == Student) // false 
 
 

這也很奇怪，明明 ming 是繼承與 Student，卻返回 false，究其原因，Student.prototype 的 constructor 方法丟失，向上找到了Student.prototype.__proto__ 的 constructor 方法。

再找原因，這句話導(dǎo)致了 Student.prototype 的 constructor 方法丟失：

 
 

  
  
Student.prototype = new Person();
 
 

在這句話之前打一個斷點，曾經(jīng)是有的，只是被替換掉了：

 找到了問題所在，現(xiàn)在來改進：

 
 

  
  
// fn 用來排除多余的屬性(name)
  
  
var fn = function(){};
  
  
fn.prototype = Person.prototype;
  
  
Student.prototype = new fn();
  
  
// 重新添上 constructor 屬性
  
  
Student.prototype.constructor = Student; 
 
 

用上面的繼承代碼替換掉之前的 Student.prototype = new Person();

面向?qū)ο蟮姆庋b

我們不能每一次寫代碼的時候都這樣寫這么多行來繼承吧，所以，于情于理，還是來進行簡單的包裝：

 
 

  
  
function classInherit(subClass, parentClass){
  
  
  var fn = function(){};
  
  
  fn.prototype = parentClass.prototype;
  
  
  subClass.prototype = new fn();
  
  
  subClass.prototype.constructor = subClass;
  
  
}
  
  
classInherit(Student, Person); 
 
 

哈哈，所謂的包裝，就是重抄一下代碼。

進一步完善面向?qū)ο?/strong>

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

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

 
 

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

對于 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');
  
  
} 
 
 

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

來看下 JQuery 之父是如何 class 的面向?qū)ο?，原文在這，源碼如下。

 
 

  
  
/* Simple JavaScript Inheritance
  
  
 * By John Resig http://ejohn.org/
  
  
 * MIT Licensed.
  
  
 */
  
  
// Inspired by base2 and Prototype
  
  
(function(){
  
  
  // initializing 開關(guān)很巧妙的來實現(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) 用來使原型賦值時不調(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
  
  
      //對函數(shù)判斷，將屬性套到子類上
  
  
      prototype[name] = typeof prop[name] == "function" &&
  
  
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
  
  
        (function(name, fn){
  
  
          //用閉包來存儲
  
  
          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
  
  
            //實現(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;
  
  
  };
  
  
})(); 
 
 

這個時候就可以很輕松的實現(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 的實現(xiàn)方式非常的妙，也比較貼近 supper 方法，我本人也用源碼調(diào)試了好幾個小時，才勉強能理解。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 中類的使用請參考阮一峰老師的 Class基本語法。

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

 
 

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

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

回到最開始的組件問題

那么，說了這么多面向?qū)ο?，現(xiàn)在回到最開始的那個組件的實現(xiàn)——如何用面向?qū)ο髞韺崿F(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"});
  
  
} 
 
 

但是，這樣子，基本功能算是實現(xiàn)了，關(guān)鍵是不好擴展，沒有面向?qū)ο蟮木琛Ｋ?，針對目前的情況，我們準備建立一個 Base 基類，init 表示初始化，render 函數(shù)表示渲染，bind 函數(shù)表示綁定，destory 用來銷毀，同時 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(){
  
  
    //定義銷毀方法
  
  
  }
  
  
}); 
 
 

基于這個 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 的時候才會返回 success，這個時候能很快定位到 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é)

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

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