模拟实现兼容低版本IE浏览器的原生bind()函数功能:
代码如下:
if(!Function.prototype.bind){
  Function.prototype.bind=function(oThis){
    if (typeof this !== 'function'){
      throw new TypeError('调用者不是当前函数对象');
    }
  
    var aArgs = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP = function() {},
        fBound = function() {
          return fToBind.apply(this instanceof fNOP && oThis ? this : oThis||window,          
          aArgs.concat(Array.prototype.slice.call(arguments)));
        };
  
        fNOP.prototype = this.prototype;
        fBound.prototype = new fNOP();
  
    return fBound;
  };
}
上面的代码实现了兼容效果,下面介绍一下它的实现过程。
一.代码注释:
1.if(!Function.prototype.bind),判断当前浏览器是否支持bind()函数。
2.Function.prototype.bind=function(oThis){},如果不支持的话,就添加一个bind函数,参数自然是this要指向的对象。
3.if (typeof this !== 'function'){
  throw new TypeError('调用者不是当前函数对象');
},因为使用call或者apply等方式的存在,可以将调用者转换成其他对象,比如func.bind.call(obj),就是为了防止此情况的出现。
4.var aArgs = Array.prototype.slice.call(arguments, 1),获取为bind函数传递的从第二个开始以后的参数。
5.fToBind = this,将当前函数对象的this引用赋值给变量fToBind 。
6.fNOP = function() {},使用表达式方式创建一个函数,它的用法在后面介绍。
7.fBound = function() {  
  return fToBind.apply(this instanceof fNOP && oThis ? this : oThis||window , 
  aArgs.concat(Array.prototype.slice.call(arguments)));
},fBound函数就是要返回的函数。return fToBind.apply()前面加上return是因为fToBind函数可能会有返回值。
this instanceof fNOP && oThis ? this : oThis||window,this instanceof fNOP可以判断是否用作构造函数,至于&&与运算符后面的oThis 是否需要值得商榷,如果按照MDN的源码的话,当用作构造函数不传递oThis参数的时候,那么会用window对象调用fToBind函数,如果此位置 没有oThis,那么无论是否bind()函数传递oThis参数,函数fBound用作构造函数的时候,都能够使用this调用fToBind()函 数。
aArgs.concat(Array.prototype.slice.call(arguments)),两个数组进行连接,最终结果就是要传递给fToBind()函数的参数。
8.fNOP.prototype = this.prototype,此句感觉完全没有必要,可能是为了增加原型链的密度。
9.fBound.prototype = new fNOP(),将fBound的原型对象设置为fNOP()的实例对象,这样的话如果fBound 用作构造函数的话,this instanceof fNOP返回值为true。
10.return fBound,返回此函数。

模拟实现兼容低版本IE浏览器的原生bind()函数功能的更多相关文章

  1. 兼容低版本IE浏览器的一些心得体会(持续更新)

    前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...

  2. HTML5中的语义标签兼容IE8以及更低版本的浏览器

    看某教程,说让HTML5的这些语义标签能够兼容低版本的浏览器,原文是“你可以设置css的display属性为block”.很好理解,就设置css样式为block嘛,那就直接设置咯: header, s ...

  3. Fundebug前端JavaScript插件更新至1.8.0,兼容低版本的Android浏览器

    摘要: 兼容低版本Android浏览器,请大家及时更新. Fundebug前端BUG监控服务 Fundebug是专业的程序BUG监控平台,我们JavaScript插件可以提供全方位的BUG监控,可以帮 ...

  4. Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案

    Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...

  5. 使用html5兼容低版本浏览器

    因为html5 新出的一些语义化的标签,在低版本浏览器下不能识别,举个例子,比如你写了一个 header 标签中,写了一段文本,在低版本浏览器下,肯定是能看到的,但是,那是他是不认识 header标签 ...

  6. split方法在低版本IE浏览器上无法解析的问题

    前一篇不知道怎么被博客园给删了,重新补发一个. 最近在项目中发现一个很诡异的问题,通过js获取cookie时,发现赋给用户name的时候IE9和低于9以下的浏览器对比时获取到的名字不一样,通过调试发现 ...

  7. 解决opacity属性在低版本IE浏览器下失效的方法

    以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的op ...

  8. android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下,另行实现圆形scale动画

    ViewAnimationUtils.createCircularReveal()的简介: ViewAnimationUtils.createCircularReveal()是安卓5.0才引入的,快速 ...

  9. 低版本IE浏览器 input元素出现叉叉的情况

    都说是IE10之上的浏览器才有这个问题,恰巧我IE10之上都没有问题,反而是低版本的浏览器出现了这个问题.作为一个凭证,我先放一张图片在这里面. 之前无意中解决过这个问题,如今复现确实是没有解决,网上 ...

随机推荐

  1. Machine Learning and Data Science 教授大师

    http://www.cs.cmu.edu/~avrim/courses.html Foundations of Data Science Avrim Blum, www.cs.cornell.edu ...

  2. JSBinding + SharpKit / 实战:转换 Stealth

    这个例子相对简单,基本上一路顺畅 // JSBindingSettings.classes public static Type[] classes = new Type[] { typeof(Per ...

  3. 最大化 AIX 上的 Java 性能,第 5 部分: 参考资料和结论

    http://www.ibm.com/developerworks/cn/aix/library/es-Javaperf/es-Javaperf5.html 最大化 AIX 上的 Java 性能,第 ...

  4. Unable to determine the principal end of an association between the types '***. The principal end of this association must be explicitly configured using either the relationship fluent API or data annotations.

    MVC中数据库表如果是一对一的主键关系时要加[Required]不然会出错Unable to determine the principal end of an association between ...

  5. Ajax编程中,经常要能动态的改变界面元素的样式

    在Ajax编程中,经常要能动态的改变界面元素的样式,可以通过对象的style属性来改变,比如要改变背景色为红色,可以这样写:element.style.backgroundColor=”#ff0000 ...

  6. 阅读layim代码小记,实现可以更改用户签名的方法

    用layim原版的时候发现,用户的签名是不能直接修改的,如下: 其实要改也很简单,查看一下源代码,然后加一个input进去,可是,加完之后是这样的: 没关系,给它一个样式,让它乖乖的“隐藏“起来. / ...

  7. 【linux】chmod命令详细用法

    功能说明: 变更文件或目录的权限 u:User,即文件或目录的拥有者. g:Group,即文件或目录的所属群组. o:Other,除了文件或目录拥有者或所属群组之外,其他用户皆属于这个范围. a:Al ...

  8. POJ #1015 - Jury Compromise - TODO: POJ website issue

    (poj.org issue. Not submitted yet) This is a 2D DP problem, very classic too. Since I'm just learnin ...

  9. 51nod1039 x^3 mod p

    X*X*X mod P = A,其中P为质数.给出P和A,求<=P的所有X.   Input 第1行:一个数T,表示后面用作输入测试的数的数量.(1 <= T <= 1000) 第2 ...

  10. erlang和go之间桥接库相关

    https://github.com/goerlang