類的優雅寫法

wait.發表於2018-10-20

前言

雖然現在已經是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.**方式，還是私有變數的方式，都是獨佔的。 所以，在寫一個類的時候，需要考慮該新增屬性是共享的，還是獨佔的。以此，決定在構造器還是原型上進行宣告。 前端全棧交學習流圈：866109386。 歡迎大家進入交流吹水。

三、程式碼規範

  • 類的命名規範，業界有不成文的規定，就是首字母大寫。
  • 原型上的私有方法，預設以下劃線開始。這種只是團隊合作方面有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);
}
複製程式碼

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

相關文章