前言 雖然現在已經是ES6的時代，但是，還是有必要瞭解下ES5是怎麼寫一個類的。 本文詳述JavaScript面向對象編程中的類寫法，並分步驟講述如何寫出優雅的類。 一、例子 例子為一個輕提示組件 。 需要實現的功能： 方法，顯示提示 方法，隱藏提示 方法，初始化提示語 二、類的構成 JavaScr ...
前言
雖然現在已經是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);
}這樣，把鍋甩回去，豈不是更妙
