雖然如今已是ES6的時代,可是,仍是有必要了解下ES5是怎麼寫一個類的。
本文詳述JavaScript面向對象編程中的類寫法,並分步驟講述如何寫出優雅的類。javascript
例子爲一個輕提示組件Toast
。
須要實現的功能:html
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的類,是用函數對象
來實現。
類的實例化形式以下:java
var T = new Toast();
其中的重點,就是Function
的編寫。node
類分爲兩部分:constructor
+prototype
。也即構造器
+原型
。編程
構造器從直觀上來理解,就是寫在函數內部的代碼。
從Toast例子上看,構造器就是如下部分:app
function Toast(option){ this.prompt = ''; this.elem = null; this.init(option); }
這裏的this
,指向的是實例化的類。
每次經過new Toast()
的方式進行實例化,構造器都會執行一遍。dom
原型上的方法和變量的聲明,都是經過Toast.prototype.*
的方式。
那麼在原型上普通的寫法以下:ide
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
。優化
原型上的方法和變量,是該類全部實例化對象共享的。也就是說,只有一份。
而構造器內的代碼塊,則是每一個實例化對象單獨佔有。無論是否用this.**
方式,仍是私有變量的方式,都是獨佔的。
因此,在寫一個類的時候,須要考慮該新增屬性是共享的,仍是獨佔的。以此,決定在構造器仍是原型上進行聲明。
類的實例化,一個強制要求的行爲,就是須要使用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); }
這樣,把鍋甩回去,豈不是更妙👽