posts - 7, comments - 58, trackbacks - 0

     Prototype的bind方法常常把許多學習它的人弄得糊糊涂涂，google和baidu一番后還是一塌胡涂！本人也如此；本人覺得它是個從“謎人”到“迷人”的方法。此文將發表個人對此方法的理解，希望能幫助大家成功渡“謎”，到達“迷人”的彼岸！
<html>
<head>
<script src="prototype.js"></script> //@7
<script type="text/javascript">
   /**********************************
    *
    * 實現渲染一個帶有"上一頁"和"下一頁"的組件,點擊"上一頁",當前頁減1,點擊"下一頁"當前頁加1
    *
    */
   function PagesSystem(container){
     this.currentPage = 10; //當前頁
     this.pageSysDiv = document.getElementById(container); //容器

     this.init = function() { //將組件畫出來
       this.createPrePage();
       this.createNextPage();
     };

     this.changePage = function(evtObj) { //根據點擊后傳過來的參數決定是加1或是減1
        if(evtObj == "next") {
          this.currentPage += 1;
          alert("你已執行將當前頁加1，現在當前頁是：" + this.currentPage);
        }else if(evtObj == "pre"){
          //此處不作if(this.currentPage ==1) return;限制為了體現當傳入的參數為"pre"時，下面的alert()一定會執行
          this.currentPage -= 1;
          alert("你已執行將當前頁減1，現在當前頁是：" + this.currentPage);
        }

     };

     this.createPrePage = function() {//創建上一頁組件
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.changePage; //@1 當點擊此（"上一頁"）銨鈕時執行
       _a.innerText = "上一頁";
       _span.appendChild(_a);
       this.pageSysDiv.appendChild(_span);
     };

     this.createNextPage = function() {//創建下一頁組件
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.changePage; //@2 當點擊此（"下一頁"）銨鈕時執行
       _a.innerText = "下一頁";
       _span.appendChild(_a);
       this.pageSysDiv.appendChild(_span);
     };

     this.init(); //執行初始化
   }
   function testUse(msg){//@3在提出問題環節用到
     alert(msg);
   }
   window.onload = function() {
     var ps = new PagesSystem("pageDiv");
   }
</script>
</head>
<body>
<div id="pageDiv"></div>
</body>
</html>

二、分析代碼，提出問題，解決問題
1、無法傳遞參數問題。
   你細看@1和@2處,當前的代碼實現是無法把"pre"和"next"參數傳遞過去，于是，當你運行例子，點擊上一頁或下一頁，都是沒信息alert出來的！
   這種情況，是很常見的。那么，如何實現將參數傳過去。
   將@1處代碼修改如下：
                    _a.onclick = function(){ //@1 當點擊此（"上一頁"）銨鈕時執行
                         testUse("pre"); //參看@3
                         this.changePage("pre");
                    }
   這樣創建一個匿名函數賦予_a.onclick,也就是當_a對象的onclick事件觸發后將執行此匿名函數，而匿名函數將幫忙調用testUse("pre")和this.changePage("pre")兩個方法，
   從而達成傳遞參數。
   修改代碼，運行例子后點擊上一頁后會顯示如下兩個信息，一個是testUse中輸出的信息，證明了實現參數傳遞，另一個卻是運行錯誤提示。


   這是執行this.changePage("pre")方法拋出來的。它并沒像我們預期想的運行。
   從提示獲到的信息是，對象不支持此屬性或方法（如果瀏覽器報的是中文提示就可以看到“對象不支持此方法或屬性”的提示）
   回頭看this.changePage("pre")方法，很明顯this是錯誤提示中所指的對象，在本應用中指PagesSystem對象指針的引用，在應用中確實是聲明了this.changePage("pre")方法，但為什么說沒此方法呢？？？？
2、在問題1中，我們已成功解決傳遞參數，但PagesSystem對象的changePage方法被誰偷了？？？
   再將剛才的代碼修改如:
                     _a.onclick = function(){ //@1 當點擊此（"上一頁"）銨鈕時執行
                       testUse("pre"); //參看@3
                       alert(this.tagName);
                       this.changePage("pre");
                    }
   再運行例子，你會發現輸出this.tagName的值為 A, 它就是_a對象。噢，我的天啊。怎么會這樣？？？
   哈哈..._a對象就是<a href=""/></a>這個html 元素對象，這里是“上一頁”銨鈕對象，原型中哪來changePage方法啊，所以報錯！！！
   你可以這樣理解，看如下代碼:
     function PagesSystem(container){//此應用中的PagesSystem對象，changePage方法的上下文對象,也可以稱為歸屬者。
       //...省略其它代碼
       this.changePage = function(evtObj) { //根據點擊后傳過來的參數決定是加1或是減1
         if(evtObj == "next") {
           this.currentPage += 1;
           alert("你已執行將當前頁加1，現在當前頁是：" + this.currentPage);
         }else if(evtObj == "pre"){
           //此處不作if(this.currentPage ==1) return;限制為了體現當傳入的參數為"pre"時，下面的alert()一定會執行
           this.currentPage -= 1;
           alert("你已執行將當前頁減1，現在當前頁是：" + this.currentPage);
         }
       };
       //...省略其它代碼
     }

     這樣的代碼，你很容易看出this是指PagesSystem, 那么我們繼續往下看
     假設 A對象的原型如下:
     function A() {//@4
       //...
        this.onclick;

        this.doClick = function() { //點擊
          this.onclick();//執行
        }

       //...
     }

     當你在PagesSystem方法中
                   _a.onclick = function(){ //@1 當點擊此（"上一頁"）銨鈕時執行
                       testUse("pre"); //參看@3
                       alert(this.tagName);
                       this.changePage("pre");
                    }
    寫上這樣的代碼后,你可以離譜認為@4的代碼的模樣是如下：
    function A() {//@4
       //...
        this.onclick = function(){ //@1 當點擊此（"上一頁"）銨鈕時執行
             testUse("pre"); //參看@3
             alert(this.tagName); //@5
             this.changePage("pre"); //@6
          };

        this.doClick = function() { //點擊
          this.onclick();//執行
        }
       //...
     }
     呵呵。。如果這樣看的話，@5,@6中的this當然是指a對象，沒異義。那當然是沒changePage方法。

3、那么如何解決這問題呢？？
   很幸運，prototype.js中的bind方法就可以解決這樣的問題，它還解決我們上面提的傳參數問題。
   看bind大俠帥樣:

   bind: function() {
    if (arguments.length < 2 && Object.isUndefined(arguments[0])) return this;
    var __method = this, args = $A(arguments), object = args.shift();
    return function() {
      return __method.apply(object, args.concat($A(arguments)));
    }
}
bind方法中的this就是bind方法的所屬者（上下文）如: f.bind(),f是一個聲明了的方法,那么bind 方法里的this就是f
再細看，bind方法其實做的工作是返回一個匿名函數,此匿名函數幫忙執行this所指的方法（bind方法的所屬者），如果你有如下代碼
function f(msg) {
    this.functionName = "f method";
    alert(msg);
    alert(this.functionName);
}

button.onclick = f.bind(this, msg); //這里的this指f, 在bind方法中用object = args.shift()獲得，這樣的話，當點擊button后執行f方法, f方法中的this就不會無故被 button代替。^_^不然，會報錯的啊，button哪來functionName，呵呵...
它既解決將msg參數傳過去，同時將f綁定到button環境下，bind方法得名可能就是這意義吧。至于如何實現將f綁定，靠的就是apply方法。
apply謎人色彩就由你們自行去揭開啦！
介紹了bind大俠給大家，我的例子就麻煩你們自己調通它啦。謝了。。

歡迎交流指正。

備注：如需轉載本文，請注明出處