javascript原生bind方法ie低版本兼容詳解

上一篇文章講到了javascript原生的bind方法: 

http://www.cnblogs.com/liulangmao/p/3451669.html

 

這篇文章就在理解了原生bind方法的原理之後,本身寫一個原型bind方法,來兼容ie低版本瀏覽器:

 

bind方法一共作了三件事:

1.改變方法中的上下文

2.爲方法傳入實參

3.返回一個改變了上下文而且調用的時候傳入指定的實參的新方法

所以,咱們就照着這個思路,寫一個Function的原型方法:

    if(!Function.prototype.bind){
      Function.prototype.bind= function(obj){
        //保存調用bind的方法
        var self = this;
        //保存調用bind時的參數
        var selfArg = Array.prototype.slice.call(arguments,1);
        //當使用new方式來調用bind後的方法,須要使用bridge來繼承self的原型;
        var bridge = function(){};
        bridge.prototype = self.prototype;
        //建立新的函數
        var _self = function(){
          //調用新函數時,將調用新函數時傳入的參數和bind時的參數合併
          var newArg = selfArg.concat(Array.prototype.slice.call(arguments));
          //返回執行self方法,改變指針和參數
          //若是是使用new方法調用,那麼this上下文就是實例化之後的實例,而不是bind時傳入的obj,這個暫時想不到有什麼例子須要這樣調用
          return self.apply(this instanceof bridge? this : obj||{} , newArg)
        };
         _self.prototype = new bridge();
        //返回新建立的函數
        return _self;
      }
    }

 

下面來看下使用bind的結果:

    var intro = function(age){
        //arguments[arguments.length-1]能夠用來訪問事件對象
        //bind方法會把執行方法時的參數放在bind時傳入的參數的後面,而後一塊兒執行,因此,事件對象做爲觸發事件時傳入的參數,它就是最後一個參數,
        //而且使用這種方式訪問事件對象無需考慮兼容性問題
        alert(arguments[arguments.length-1].clientX);
        alert(this.name+','+this.job+','+age);
    };

    var jyh = {name:'jyh',job:'web-front-end'};
    var introOther = intro.bind(jyh,18);

    if(document.addEventListener){
      document.addEventListener('mousedown',introOther);
    }
    else{
      document.attachEvent('onmousedown',introOther)
    }

    //若是使用new方式來調用,那麼this指針指向zxg實例
    var zxg = new introOther();

 

這樣就作到了在任意瀏覽器中使用bind方法