摘要：根據(jù)以上代碼的變形，我們現(xiàn)在用面向?qū)ο笏枷雭砭帉懘a，創(chuàng)建構(gòu)造函數(shù)，添加屬性及方法。首先構(gòu)造函數(shù)中的，由于是用關(guān)鍵字，因此指向，沒問題。同時(shí)將指向當(dāng)前點(diǎn)擊的以參數(shù)形式傳入中，這樣一個(gè)面向?qū)ο笏枷氲拇a就寫出來了。

??本人自學(xué)前端近半年，js達(dá)到熟練的水平，面向?qū)ο笏枷?、this指向有一定的了解，但是要用面向?qū)ο笏枷雽懘a就一臉懵逼了，最近看到某課堂的視頻（里面廣告嫌疑，就不說是啥了），覺得講的很好，因此想和大家分享一下，希望那些和我一樣有一定基礎(chǔ)但是不知道怎么寫的小伙伴也能愉快的寫代碼。
??我們以選項(xiàng)卡的實(shí)現(xiàn)為例，先給出html的結(jié)構(gòu)和樣式：

    

        1
        2
        3
        
111
        
222
        
333
    

??我們先用過程式的編程思想來實(shí)現(xiàn)，然后將其改為面向?qū)ο笏枷氲拇a。

window.onload=function(){
            //獲取元素
            var oParent=document.getElementById("div1");
            var btns=oParent.getElementsByTagName("button");
            var divs=oParent.getElementsByTagName("div");
            //通過循環(huán)給每個(gè)btn添加點(diǎn)擊事件
            for (var i = 0; i < btns.length; i++) {
                btns[i].index=i;//存儲(chǔ)當(dāng)前btn的下標(biāo)
                btns[i].onclick=function(){
                    for (var i = 0; i < btns.length; i++) {
                        btns[i].className="";
                        divs[i].style.display="none";
                    }
                    this.className="active";
                    divs[this.index].style.display="block";//讓對(duì)應(yīng)當(dāng)前btn的div顯示
                }
            }
        }

??對(duì)于小白，也就是和我一樣的人，一般就是寫出上面的代碼?，F(xiàn)在我們要用面向?qū)ο蟮乃枷雭砀膶?，首先我們要?duì)以上代碼進(jìn)行變形，使其不要出現(xiàn)函數(shù)的嵌套（如onload函數(shù)中就存在嵌套函數(shù)），變量可以改為全局變量，所以講以上代碼做出如下改變：變量變?yōu)槿肿兞浚殖鰜硪粋€(gè)init（）函數(shù)和change（）函數(shù)。

        var oParent,btns,divs;
        window.onload=function(){
            oParent=document.getElementById("div1");
            btns=oParent.getElementsByTagName("button");
            divs=oParent.getElementsByTagName("div");
            init();
            
        };
        function init(){
            for (var i = 0; i < btns.length; i++) {
                btns[i].index=i;
                btns[i].onclick=change;
            }
        }
        function change(){
            for (var i = 0; i < btns.length; i++) {
                btns[i].className="";
                divs[i].style.display="none";
            }
            this.className="active";
            divs[this.index].style.display="block";
        }

??根據(jù)以上代碼的變形，我們現(xiàn)在用面向?qū)ο笏枷雭砭帉懘a，創(chuàng)建構(gòu)造函數(shù)，添加屬性及方法。

window.onload=function(){
            var t1=new Tab();
            t1.init();
        };
        function Tab(){
            oParent=document.getElementById("div1");
            btns=oParent.getElementsByTagName("button");
            divs=oParent.getElementsByTagName("div");
        }
        Tab.prototype.init=function(){
            
            for (var i = 0; i < this.btns.length; i++) {
                btns[i].index=i;
                btns[i].onclick=change;
            }
        }
        Tab.prototype.change=function() {
            for (var i = 0; i < this.btns.length; i++) {
                btns[i].className="";
                divs[i].style.display="none";
            }
            className="active";
            divs[btn.index].style.display="block";
        };

??將結(jié)構(gòu)寫出來，復(fù)制改過的代碼，此時(shí)面向?qū)ο蟮乃枷胍呀?jīng)初現(xiàn)端倪了。最后一步就是添加this了，因此將每個(gè)屬性前面都添加this。

window.onload=function(){
            var t1=new Tab();
            t1.init();
        };
        function Tab(){
            this.oParent=document.getElementById("div1");
            this.btns=this.oParent.getElementsByTagName("button");
            this.divs=this.oParent.getElementsByTagName("div");
        }
        Tab.prototype.init=function(){
            
            for (var i = 0; i < this.btns.length; i++) {
                this.btns[i].index=i;
                this.btns[i].onclick=change();                    
            }
        }
        Tab.prototype.change=function() {
            for (var i = 0; i < this.btns.length; i++) {
                this.btns[i].className="";
                this.divs[i].style.display="none";
            }
            this.className="active";
            this.divs[this.index].style.display="block";
        };

??以上代碼就完成了嗎？答案是否定的。為什么？還是因?yàn)閠his指向的問題。讓我們一個(gè)一個(gè)來看。首先構(gòu)造函數(shù)中的this，由于是用new關(guān)鍵字，因此this指向t1，沒問題。init（）方法，由于調(diào)用方式是t1.init（），this指向也為t1，沒問題。那問題肯定是在change（）方法中了，首先看看其調(diào)用形式this.btns[i].onclick=change();其this指向?yàn)閠his.btns[i]，即當(dāng)前點(diǎn)擊的按鈕，因此在change（）內(nèi)部，this.btns[i]，this.divs[i]都不存在，因?yàn)閎tns和divs是t1的屬性，其他的this如this.className指向是正確的，因此我們要改變this指向，一般都是將this指向改為指向?qū)ο?，即t1。怎么改this指向？this指向與函數(shù)的調(diào)用方式有關(guān)，因此作出如下改變。

Tab.prototype.init=function(){
            var This=this;
            for (var i = 0; i < this.btns.length; i++) {
                this.btns[i].index=i;
                this.btns[i].onclick=function(){
                    This.change(this);
                }
            }
        }
Tab.prototype.change=function(btn) {
            for (var i = 0; i < this.btns.length; i++) {
                this.btns[i].className="";
                this.divs[i].style.display="none";
            }
            btn.className="active";
            this.divs[btn.index].style.display="block";
        };

??首先在init（）中，將this存在變量This中，用匿名函數(shù)中采用This.change(this);方式來調(diào)用方法。同時(shí)將this（指向當(dāng)前點(diǎn)擊的btn）以參數(shù)形式傳入change（）中，這樣一個(gè)面向?qū)ο笏枷氲拇a就寫出來了。

??不知道大家看了會(huì)不會(huì)對(duì)大家有所幫助，現(xiàn)在我用面向過程思想寫了一個(gè)拖拽的代碼，大家可以試著將其改為面向?qū)ο蟮拇a，代碼如下，過程中會(huì)有幾個(gè)坑，一個(gè)就是this指向的問題，另外一個(gè)就是事件函數(shù)的問題（ev只能出現(xiàn)在事件函數(shù)中）。最后跟大家分享一個(gè)小經(jīng)驗(yàn)，事件和定時(shí)器很容易造成this指向的問題，因此在面向?qū)ο缶幊踢^程中要特別注意。