JS面向對象編程實現的Tab選項卡案例詳解
本文實例講述了JS面向對象編程實現的Tab選項卡。分享給大家供大家參考，具體如下：
Tab選項卡案例
下面是一個簡單面向過程的Tab選項卡。
<!DOCTYPE html><html><head> <style> #tabBox input { background: #F6F3F3; border: 1px solid #FF0000; } #tabBox .active { background: #E9D4D4; } #tabBox div { width:300px; height:250px; display:none; padding: 10px; background: #E9D4D4; border: 1px solid #FF0000; } </style> <meta charset='utf-8' /> <title>選項卡</title> <script> window.onload=function(){ var tabBox = document.getElementById(’tabBox’); var tabBtn = tabBox.getElementsByTagName(’input’); var tabDiv = tabBox.getElementsByTagName(’div’); for(var i=0;i<tabBtn.length;i++){tabBtn[i].index = i;tabBtn[i].onclick = function (){ for(var j=0;j<tabBtn.length;j++){ tabBtn[j].className=’’; tabDiv[j].style.display=’none’; } this.className=’active’; tabDiv[this.index].style.display=’block’;}; } }; </script></head> <body> <div id='tabBox'> <input type='button' value='主頁' /> <input type='button' value='說說' /> <input type='button' value='日志' /> <div style='display:block;'>這是主頁內容</div> <div>這是說說內容</div> <div>這是日志內容</div> </div></body></html>
下面來慢慢改成面向對象的形式。
1.首先將嵌套的函數拿到window.onload外面，不能有函數嵌套，可以有全局變量。如下：所有的改寫最終效果都不變。
<script> //將在嵌套函數里的變量提取到全局中 var tabBtn = null; var tabDiv = null;window.onload = function(){ var tabBox = document.getElementById(’tabBox’); tabBtn = tabBox.getElementsByTagName(’input’); tabDiv = tabBox.getElementsByTagName(’div’); for(var i=0;i<tabBtn.length;i++){tabBtn[i].index = i;//此處調用函數即可tabBtn[i].onclick = clickBtn; } };//將嵌套函數提取到全局中 function clickBtn(){ for(var j=0;j<tabBtn.length;j++){tabBtn[j].className=’’;tabDiv[j].style.display=’none’; } this.className=’active’; tabDiv[this.index].style.display=’block’; }; </script>
2.將全局的變量變為對象的屬性，全局的函數變為對象的方法；將window.onload里的代碼提取到一個構造函數里面，在window.onload里創建對象即可；(下面的代碼執行起來是有問題的)。
這里必須注意：在構造函數Tab里的this跟之前this所代表的是不同的(此處是通過new來創建對象的)；在上面的示例中，this指的是調用者；在構造函數里，this指向的是var tab = new Tab() ，即tab這個對象，注意是對象。
說一下這段代碼的問題：我們在Tab的原型上添加clickBtn方法后，clickBtn方法里的this本應該是指向var tab = new Tab()的，但是我們在 this.tabBtn[i].onclick = this.clickBtn; 將clickBtn添加給了this.tabBtn[i]，即input按鈕，clickBtn的所屬由Tab對象變成了input按鈕。
clickBtn的所屬變成input按鈕后，那么clickBtn里的this指向按鈕，那再來看clickBtn里的代碼，this.tabBtn、this.tabDiv，input按鈕里有這兩個屬性嗎？沒有，所以會出錯！
<script> window.onload = function(){ var tab = new Tab('tabBox'); } /** * 將之前window.onload里的代碼提到一個構造函數里 * [可以將這個Tab構造函數想象成一個Tab類] * @param {Object} id：選項卡id以參數的形式傳入 */ function Tab(id){ var tabBox = document.getElementById(id); //將之前的全局變量變為對象的屬性 this.tabBtn = tabBox.getElementsByTagName(’input’); this.tabDiv = tabBox.getElementsByTagName(’div’); for(var i=0;i<this.tabBtn.length;i++){this.tabBtn[i].index = i;//此處這種方式調用函數，已經將clickBtn的所屬變成this.tabBtn[i]this.tabBtn[i].onclick = this.clickBtn; } }; //將之前的全局函數添加到構造函數的原型里，作為對象的一個方法 Tab.prototype.clickBtn = function(){ alert(this); //HTMLInputElement for(var j=0;j<this.tabBtn.length;j++){this.tabBtn[j].className=’’;this.tabDiv[j].style.display=’none’; } this.className=’active’; this.tabDiv[this.index].style.display=’block’; }; </script>
3.將clickBtn的調用放在一個函數里，這樣就不會改變clickBtn的所屬了。alert(this);此時彈出的是一個Object，說明clickBtn的所屬關系沒變，還是Tab對象。但是還有另一個問題，此時clickBtn里的this指向tab對象，那么this.className、this.index，此處的this指的是tab對象，那么對象中有這兩個屬性嗎？沒有，還會出錯！所以第4步繼續改造。
window.onload = function(){ var tab = new Tab('tabBox'); } /** * 選項卡 * @param {Object} id：選項卡id */ function Tab(id){ var tabBox = document.getElementById(id); this.tabBtn = tabBox.getElementsByTagName(’input’); this.tabDiv = tabBox.getElementsByTagName(’div’); for(var i=0;i<this.tabBtn.length;i++){this.tabBtn[i].index = i;//將this保存成一個變量，就可以在下面代碼中調用對象的方法了var _this = this;//此處這種方式調用函數，就不會改變clickBtn方法的所屬關系this.tabBtn[i].onclick = function(){ //注意此處不能直接使用this，this指向this.tabBtn[i] _this.clickBtn();}; } }; //點擊選項卡按鈕 Tab.prototype.clickBtn = function(){ alert(this); //Object for(var j=0;j<this.tabBtn.length;j++){this.tabBtn[j].className=’’;this.tabDiv[j].style.display=’none’; } this.className=’active’; this.tabDiv[this.index].style.display=’block’; };
4. 以參數的形式將點擊的按鈕傳入clickBtn中
window.onload = function(){ var tab = new Tab('tabBox'); } /** * 選項卡 * @param {Object} id：選項卡id */ function Tab(id){ var tabBox = document.getElementById(id); this.tabBtn = tabBox.getElementsByTagName(’input’); this.tabDiv = tabBox.getElementsByTagName(’div’); for(var i=0;i<this.tabBtn.length;i++){this.tabBtn[i].index = i;var _this = this;this.tabBtn[i].onclick = function(){ //注意參數this代表的是this.tabBtn[i]，即input按鈕 _this.clickBtn(this);}; } }; //將點擊的按鈕以參數的形式傳入 Tab.prototype.clickBtn = function(btn){ for(var j=0;j<this.tabBtn.length;j++){this.tabBtn[j].className=’’;this.tabDiv[j].style.display=’none’; } btn.className=’active’; this.tabDiv[btn.index].style.display=’block’; };
5.最終版 —— 將代碼提取到一個單獨的js文件中，在用的時候引入即可。一般花大時間去寫一個面向對象的程序，就是為了能夠復用，以及方便的使用。
Tab.js
/** * 選項卡 * @param {Object} id 選項卡id */function Tab(id){ var tabBox = document.getElementById(id); this.tabBtn = tabBox.getElementsByTagName(’input’); this.tabDiv = tabBox.getElementsByTagName(’div’); for(var i=0;i<this.tabBtn.length;i++){ this.tabBtn[i].index = i; var _this = this; this.tabBtn[i].onclick = function(){ _this.clickBtn(this); }; }};/** * 為Tab原型添加點擊選項卡方法 * @param {Object} btn 點擊的按鈕 */Tab.prototype.clickBtn = function(btn){ for(var j=0;j<this.tabBtn.length;j++){ this.tabBtn[j].className=’’; this.tabDiv[j].style.display=’none’; } btn.className=’active’; this.tabDiv[btn.index].style.display=’block’;};
使用：tab.html 可以看到使用的時候，就可以很簡單的創建兩個選項卡出來了。
<!DOCTYPE html><html><head> <style> .tab input { background: #F6F3F3; border: 1px solid #FF0000; } .tab .active { background: #E9D4D4; } .tab div { width:300px; height:250px; display:none; padding: 10px; background: #E9D4D4; border: 1px solid #FF0000; } </style> <meta charset='utf-8' /> <title>選項卡</title> <!-- 引入tab.js --> <script type='text/javascript' src='http://m.b3g6.com/js/tab.js' ></script> <script> window.onload = function(){ var tab1 = new Tab('tabBox1'); var tab2 = new Tab('tabBox2'); } </script></head> <body> <div id='tabBox1'> <input type='button' value='主頁' /> <input type='button' value='說說' /> <input type='button' value='日志' /> <div style='display:block;'>這是主頁內容</div> <div>這是說說內容</div> <div>這是日志內容</div> </div> <br /> <div id='tabBox2'> <input type='button' value='技術' /> <input type='button' value='工具' /> <input type='button' value='網站' /> <div style='display:block;'>Js、Vue</div> <div>VSCode</div> <div>CSDN</div> </div></body></html>
再來簡單總結一下JS面向對象中的this，this一般會在兩種情況下出問題，一是使用定時器、二是事件，從上面的例子中也可以看出來。注意下面的說法是在構造函數里哦，其它情況下，this指向的是調用者。
可以看到效果沒有將姓名顯示出來，其實看到這里原因應該很清楚了，就是第14行代碼中this.name，此處的this指向誰？指向window，因為setInterval是屬于window的。
<!DOCTYPE html><html> <meta charset='UTF-8' /> <head> <script> function Person(name){this.name = name;//定時器setInterval(this.showName, 3000); } Person.prototype.showName = function(){alert(this); //windowalert('姓名：'+this.name); } var p1 = new Person('jiangzhou'); </script> </head></html>
解決辦法：上面例子中已經列出來了，就是用一個function將要執行的代碼包起來，使其所屬關系不會發生變化，注意function里調用方法時使用的是外部變量’_this’。事件的處理在上面的例子中已經說明了。
function Person(name){ this.name = name; var _this = this; setInterval(function(){ this.showName(); }, 3000);}Person.prototype.showName = function(){ alert(this); //[Object Object] alert('姓名：'+this.name); //姓名：jianghzou} var p1 = new Person('jiangzhou');
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章：
網公網安備