優雅的類寫法

前言

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

一、例子

例子為一個輕提示組件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();

二、類的構成

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.**方式，還是私有變量的方式，都是獨占的。
所以，在寫一個類的時候，需要考慮該新增屬性是共享的，還是獨占的。以此，決定在構造器還是原型上進行聲明。

三、代碼規范

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

四、使實例化與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);
}

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