JavaScript筆記2--Function.prototype.bind動態綁定函數

原創

2020-02-21 01:23

對於Function.prototype.bind的解釋，我覺得可以這麼說：.bind()創建了一個函數，當這個函數在被調用的時候，它裏面的 this 關鍵詞會被設置成被傳入的參數。

下面舉例一個使用.bind()方法實現動態綁定函數的例子。

（1）有一個案件查詢列表頁面，頁面的主要功能是實現案件的查詢，然後以列表的方式展示案件。可以對列表的單個案件進行選擇操作，當用戶選擇了案件後，調用列表頁面的selectAjxx()，會把案件的信息封裝成JavaScript對象作爲方法的返回值。

（2）由於有多個業務模塊調用這個案件查詢頁面，而且每個模塊調用完這個方法獲得選擇的案件信息後，處理的操作會有不同。比如有的模塊只提取案件的案號用，有的模塊需要提取案件的全部信息。

那麼問題來了，如何實現每個模塊的操作相互獨立，難道要在selectAjxx()加很多個if–else判斷，每個模塊有一個 if判斷嗎???? 看着不太專業哈，而且也不太好維護，我們應該儘量保持開閉原則，也就是對擴展開放，對修改是關閉的，不允許的。

下面就是我的實現思路，應用Function.prototype.bind巧妙的實現動態綁定。

<script>

    /************   每個模塊不同的回調操作   ************/
    function callbackObj(params){
        this.params = params;
    }

    callbackObj.prototype.doCallBack = function (){
        //不同模塊寫自己的回調操作。。。。。。
        alert(this.params.name);
    }

    function getcallbackObj(params){
        return new callbackObj(params);
    }
    /************   每個模塊不同的回調操作   ************/



    /******   多個模塊公用同一個控件，但是後續操作各有不同   *******/
    var callback = function (){
        this.doCallBack();
    }

    function selectAjxx(){
        var params = {ah:"2105年民初字第1001號",cbr:"壇主叭叭叭"};
        var obj = window.openner.getcallbackObj(params); 
        var someOneCallback = callback.bind(obj);
        someOneCallback();
    }

</script>

每個模塊實現自己的回調操作，並且提供一個獲得回調實例的方法getcallbackObj()。

列表頁面的callback對象裏的this就是需要動態綁定的對象。

注意：IE8不支持bind哈，需要自己進行擴展。支持的瀏覽器有Chrome 7+，Firefox 4.0+，IE 9+，Opera 11.60+，Safari 5.1.4+。雖然IE 8/7/6等瀏覽器不支持，但是Mozilla開發組爲老版本的IE瀏覽器寫了一個功能類似的函數，代碼如下：

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}