優雅的類寫法

前言

雖然如今已是ES6的時代，可是，仍是有必要了解下ES5是怎麼寫一個類的。 本文詳述JavaScript面向對象編程中的類寫法，並分步驟講述如何寫出優雅的類。

1、例子

例子爲一個輕提示組件Toast。 須要實現的功能：

• on方法，顯示提示
• off方法，隱藏提示
• init方法，初始化提示語

function Toast(option){
  this.prompt = '';
  this.elem = null;
  this.init(option);
}

Toast.prototype = {
  // 構造器
  constructor: Toast,
  // 初始化方法
  init: function(option){
    this.prompt = option.prompt || '';
    this.render();
    this.bindEvent();
  },
  // 顯示
  show: function(){
    this.changeStyle(this.elem, 'display', 'block');
  },
  // 隱藏
  hide: function(){
    this.changeStyle(this.elem, 'display', 'none');
  },
  // 畫出dom
  render: function(){
    var html = '';
    this.elem = document.createElement('div');
    this.changeStyle(this.elem, 'display', 'none');

    html += '<a class="J-close" href="javascript:;">x</a>'
    html += '<p>'+ this.prompt +'</p>';
    
    this.elem.innerHTML = html;

    return document.body.appendChild(this.elem);
  },
  // 綁定事件
  bindEvent: function(){
    var self = this;
    
    this.addEvent(this.elem, 'click', function(e){
      if(e.target.className.indexOf('J-close') != -1){
        console.log('close Toast!');
        self.hide();
      }
    });
  },
  // 添加事件方法
  addEvent: function(node, name, fn){
    var self = this;
    
    node.addEventListener(name, function(){
      fn.apply(self, Array.prototype.slice.call(arguments));
    }, false);
  },
  // 改變樣式
  changeStyle: function(node, key, value){
      node.style[key] = value;
  }
};

var T = new Toast({prompt:'I\'m Toast!'});
T.show();

複製代碼

2、類的構成

JavaScript的類，是用函數對象來實現。 類的實例化形式以下：

var T = new Toast();
複製代碼

其中的重點，就是Function的編寫。

類分爲兩部分：constructor+prototype。也即構造器+原型。

2.1 構造器

構造器從直觀上來理解，就是寫在函數內部的代碼。 從Toast例子上看，構造器就是如下部分：

function Toast(option){
  this.prompt = '';
  this.elem = null;
  this.init(option);
}
複製代碼

這裏的this,指向的是實例化的類。 每次經過new Toast()的方式進行實例化，構造器都會執行一遍。

2.2 原型

原型上的方法和變量的聲明，都是經過Toast.prototype.*的方式。 那麼在原型上普通的寫法以下：

Toast.prototype.hide = function(){/*code*/}
Toast.prototype.myValue = 1;
複製代碼

可是，該寫法很差的地方：就是每次都要寫前半部分Toast.prorotype，略顯累贅。 在代碼壓縮優化方面也不友好，沒法作到最佳的壓縮。 改進的方式以下：

Toast.prorotype = {
  constructor: Toast,
  hide: function(){/*code*/},
  myValue: 1 
}
複製代碼

這裏的優化，是把原型指向一個新的空對象{}。 帶來的好處，就是能夠用{key:value}的方式寫原型上的方法和變量。 可是，這種方式會改變原型上構造器prototype.constructor的指向。 若是不從新顯式聲明constructor的指向，Toast.constructor.prototype.constructor的會隱式被指向Object。而正確的指向，應該是Toast。 雖然經過new實例化沒有出現異常，可是在類繼承方面，constructor的指向異常，會產生不正確的繼承判斷結果。這是咱們不但願看到的。 因此，須要修正constructor。

2.3 構造器和原型的不一樣

原型上的方法和變量，是該類全部實例化對象共享的。也就是說，只有一份。 而構造器內的代碼塊，則是每一個實例化對象單獨佔有。無論是否用this.**方式，仍是私有變量的方式，都是獨佔的。 因此，在寫一個類的時候，須要考慮該新增屬性是共享的，仍是獨佔的。以此，決定在構造器仍是原型上進行聲明。

3、代碼規範

• 類的命名規範，業界有不成文的規定，就是首字母大寫。
• 原型上的私有方法，默認如下劃線開始。這種只是團隊合做方面有review代碼的好處，實際上仍是暴露出來的方法。

4、使實例化與new無關

類的實例化，一個強制要求的行爲，就是須要使用new操做符。若是不使用new操做符，那麼構造器內的this指向，將不是當前的實例化對象。 優化的方式，就是使用instanceof作一層防禦。

function Toast(option){
  if(!(this instanceof Toast)){
    return new Toast(option);
  }
  
  this.prompt = '';
  this.elem = null;
  this.init(option);
}
複製代碼

從上述代碼能夠看出，使用這個技巧，能夠防止團隊一些大頭蝦出現使用錯誤實例化方式，致使代碼污染的問題。 這種忍者技巧很酷，但從另外一方面考慮，仍是但願使用者能夠用正確的方式去實例化類。 因此，改爲如下這種防禦方式

function Toast(option){
  if(!(this instanceof Toast)){
    throw new Error('Toast instantiation error');
  }
  
  this.prompt = '';
  this.elem = null;
  this.init(option);
}
複製代碼

這樣，把鍋甩回去，豈不是更妙👽

---

喜歡我文章的朋友，能夠經過如下方式關注我：

• 「star」 或 「watch」 個人GitHub blog
• RSS訂閱個人我的博客：王先生的基地