用物件導向的方法重寫選項卡

2022-03-09 09:38:05 字數 1190 閱讀 7169

面向過程的tab選項卡

內容1內容2

內容3

下面我們要把它改成物件導向的選項卡

oli[i].onclick = function()
將onclick後面的匿名函式提到外面去

...

oli[i].onclick =tab;

...function tab() ;

adiv[this.index].style.display = "block";

}

將幾個變數定義到全域性,不然tab函式不能使用它

function tabswich() 

}

用this.oli這種表達將oli變成這個建構函式的屬性

tabswich.prototype.tab = function () ;

this.adiv[tis.index].style.display = "block";

}

如果就這樣執行,會報錯「for (var j = 0; j < this.oli.length; j++) 這樣改了之後,我們發現還是會報錯,那我們繼續檢查this,我們發現這裡的this有問題

this.adiv[this.index].style.display = "block";
this.index中的this,我們原意是讓它指向oli的,這面向過程時是正確的,可是我們把它改成物件導向程式設計的時候,將tab提出來做建構函式的乙個方法,在這個方法中this就不再是oli了,我們可以這樣改

this.oli[i].onclick = function()

...tabswich.prototype.tab = function (oli) {

...this.adiv[oli.index].style.display = "block";

所以,最終的改寫結果是這樣的

內容1內容2

內容3

這樣的一次實戰我們發現,this在物件導向程式設計時非常重要,雖然我們在平時的 程式設計中很少用到物件導向程式設計,但在面試時這是乙個大考點,遊戲公司大都採用物件導向的語言。

最後,推薦一篇關於this的部落格

物件導向選項卡

html 11111 22222 33333 11111 22222 33333 css div1 div,div2 div active js var oparent document.getelementbyid div1 var ainput oparent.getelementsbytagn...

物件導向選項卡

布局很簡單。第乙個選項卡box,第二個選項卡box2,這體現了物件導向建構函式級原型最大的優點 復用!div class box id box input type button value 按鈕1 class on input type button value 按鈕2 input type bu...

物件導向的選項卡

1 物件導向的選項卡在直接書寫上比較困難,咱們可以先用面向過程的方式寫乙個選項卡,然後按照 將變數變為屬性,將函式變為方法的方式,通過建構函式替換window.onload進而初始化程式。2.首先應該將其函式巢狀進行替換,使其不包含函式巢狀成分,然後看清楚this指向的值在對個別進行調整。lang ...