タブをオブジェクト向けに書き換える

5104 ワード

プロシージャ向けtabタブ




     -- 
    
        window.onload = function() {
             var oLi = document.getElementsByTagName('li');
             var aDiv = document.getElementsByTagName('div');
             for (var i = 0; i < oLi.length; i++) {
                oLi[i].index = i;// ， index i div
                oLi[i].onclick = function() {
                    for (var j = 0; j < oLi.length; j++) {
                        aDiv[j].style.display = "none";
                    };
                    
                    aDiv[this.index].style.display = "block";
                }
             };
        }

        
    
    



     1
     2
     3


     1


     2


     3

次に、オブジェクト向けのタブに変更します.

最初のステップ:すべてのネスト関数

を解く

oLi[i].onclick = function() {...}

onclickの後ろの匿名関数を外に持ち出す

...
oLi[i].onclick =tab;
...
function tab() {
                    for (var j = 0; j < oLi.length; j++) {
                        aDiv[j].style.display = "none";
                    };
                    
                    aDiv[this.index].style.display = "block";
                }

いくつかの変数をグローバルに定義します.そうしないとtab関数は使用できません.

第2歩、window.onloadが「コンストラクション関数」

に変更

function TabSwich() {
             this.oLi = document.getElementsByTagName('li');
             this.aDiv = document.getElementsByTagName('div');
             for (var i = 0; i < this.oLi.length; i++) {
                this.oLi[i].index = i;
                this.oLi[i].onclick = this.tab;
             }

        }

これを使ってoLiこの表現はoLiをこの構造関数の属性に変える

第3のステップは、Tab関数をその方法

に変える.

TabSwich.prototype.tab = function () {
              for (var j = 0; j < this.oLi.length; j++) {
               this.aDiv[j].style.display = "none";
              };
                    
              this.aDiv[tis.index].style.display = "block";
        }

手順4 thisポインタのエラー

を確認します.
このように実行すると、「for(var j=0;jこれは構造関数で

this.oLi[i].onclick = this.tab;

ここだtab"のthisは、グローバルを指します.liをtabに等しくすると、tabはliを指します.私たちが望んでいるのは、このthisが構造関数の内部を指しているので、私たちはこのようにすることができます.

// this
var _this = this
// this.oLi[i].onclick 
this.oLi[i].onclick = function(){
    _this.tab();
}

このように変更した後、私たちはやはり間違いを報告することに気づいて、それでは私たちはthisを検査し続けて、私たちはここのthisに問題があることを発見しました

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

this.indexのthisは、もともとoLiを指すことを意味していましたが、これはプロセス向けでは正しいですが、オブジェクト向けにプログラミングするときにtabを構造関数として提案する方法に変更しました.この方法では、thisはoLiではありません.私たちはこのように変更することができます.

this.oLi[i].onclick = function(){
    _this.tab(this);
}
...
TabSwich.prototype.tab = function (oLi) {
...
this.aDiv[oLi.index].style.display = "block";

だから、最終的な書き換え結果はこうです.




     -- 
    
        window.onload = function() {
            var tab1 = new TabSwich();
        }
        function TabSwich() {
             var _this = this
             this.oLi = document.getElementsByTagName('li');
             this.aDiv = document.getElementsByTagName('div');
             for (var i = 0; i < this.oLi.length; i++) {
                this.oLi[i].index = i;
                this.oLi[i].onclick = function(){
                    _this.tab(this);
                }
             }

        }
        TabSwich.prototype.tab = function (oLi) {
              for (var j = 0; j < this.oLi.length; j++) {
               this.aDiv[j].style.display = "none";
              };
                    
              this.aDiv[oLi.index].style.display = "block";
        }
    
    



     1
     2
     3


     1


     2


     3

このような実戦では、thisはオブジェクト向けのプログラミングにおいて非常に重要であることが分かった.私たちは普段のプログラミングではオブジェクト向けのプログラミングをあまり使わないが、面接ではこれが大きなポイントであり、ゲーム会社の多くはオブジェクト向けの言語を採用している.
最後に、thisに関するブログをお勧めします.https://kb.cnblogs.com/page/48134/

48日目

スコアと