類的優雅寫法
雖然現在已經是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);
}
複製程式碼
這樣，把鍋甩回去，豈不是更妙:alien: