摘要：根據以上代碼的變形，我們現在用面向對象思想來編寫代碼，創建構造函數，添加屬性及方法。首先構造函數中的，由于是用關鍵字，因此指向，沒問題。同時將指向當前點擊的以參數形式傳入中，這樣一個面向對象思想的代碼就寫出來了。

??本人自學前端近半年，js達到熟練的水平，面向對象思想、this指向有一定的了解，但是要用面向對象思想寫代碼就一臉懵逼了，最近看到某課堂的視頻（里面廣告嫌疑，就不說是啥了），覺得講的很好，因此想和大家分享一下，希望那些和我一樣有一定基礎但是不知道怎么寫的小伙伴也能愉快的寫代碼。
??我們以選項卡的實現為例，先給出html的結構和樣式：

    

        1
        2
        3
        
111
        
222
        
333
    

??我們先用過程式的編程思想來實現，然后將其改為面向對象思想的代碼。

window.onload=function(){
            //獲取元素
            var oParent=document.getElementById("div1");
            var btns=oParent.getElementsByTagName("button");
            var divs=oParent.getElementsByTagName("div");
            //通過循環給每個btn添加點擊事件
            for (var i = 0; i < btns.length; i++) {
                btns[i].index=i;//存儲當前btn的下標
                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";//讓對應當前btn的div顯示
                }
            }
        }

??對于小白，也就是和我一樣的人，一般就是寫出上面的代碼。現在我們要用面向對象的思想來改寫，首先我們要對以上代碼進行變形，使其不要出現函數的嵌套（如onload函數中就存在嵌套函數），變量可以改為全局變量，所以講以上代碼做出如下改變：變量變為全局變量，分出來一個init（）函數和change（）函數。

        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";
        }

??根據以上代碼的變形，我們現在用面向對象思想來編寫代碼，創建構造函數，添加屬性及方法。

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";
        };

??將結構寫出來，復制改過的代碼，此時面向對象的思想已經初現端倪了。最后一步就是添加this了，因此將每個屬性前面都添加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";
        };

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

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中，用匿名函數中采用This.change(this);方式來調用方法。同時將this（指向當前點擊的btn）以參數形式傳入change（）中，這樣一個面向對象思想的代碼就寫出來了。

??不知道大家看了會不會對大家有所幫助，現在我用面向過程思想寫了一個拖拽的代碼，大家可以試著將其改為面向對象的代碼，代碼如下，過程中會有幾個坑，一個就是this指向的問題，另外一個就是事件函數的問題（ev只能出現在事件函數中）。最后跟大家分享一個小經驗，事件和定時器很容易造成this指向的問題，因此在面向對象編程過程中要特別注意。