模拟实现兼容低版本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. 如何给caffe添加新的layer ?

    如何给caffe添加新的layer ? 初学caffe难免会遇到这个问题,网上搜来一段看似经典的话, 但是问题来了,貌似新版的caffe并没有上面提到的vision_layer:

  2. addClass的用法和is函数的用法

    <html> <head> <meta charset="utf-8"> <script type="text/javascri ...

  3. linux -redhat rpm 和zabbix和各种rpm包下载地址

    redhat ftp://ftp.redhat.com/pub/redhat/linux/enterprise/6Client/en/os/SRPMS/ zabbix https://sourcefo ...

  4. svg如何用marker 定义一个黑色的小圆点

    <defs> <marker id="markerStartArrow" viewBox="0 0 30 30" refX="10& ...

  5. shell之eval-command

    本文将会讲解一些linux中命令的使用与技巧希望对新手给予帮助一 e v a l命令将会首先扫描命令行进行所有的置换,然后再执行该命令.该命令适用于那些一次扫描无法实现其功能的变量.该命令对变量进行两 ...

  6. unity, polygon collider 2D 添加顶点

    正常情况下只要按下了Edit Collider按钮,鼠标停在polygon collider 2D的一条边上,就会出现一个虚拟的新顶点,此时如果按下鼠标,新顶点就创建出来了. 但是我今天遇到一个奇怪的 ...

  7. [Asp.net]说说密码框和只读框

    作者:Wolfy出处:http://www.cnblogs.com/wolf-sun/ 引言 最近负责了一个公司的小项目,从前台到后代,都是自己搞的,为一个客户弄一个信息管理的小系统,虽然对界面什么的 ...

  8. nginx windows 版 创建windows 服务

    使用的工具 Windows Service Wrapper 使用的指令 nginx -s top Windows Service Wrapper  工具的使用: 1. 定义xml 文件: 说明如下: ...

  9. PHP5.3以上版本没有libmysql.dll,以及由此带来的困扰

    有朋友下载了PHP5.3,PHP5.4版本想加载mysql支持的时候发现没有libmysql.dll文件,无法完成mysql配置,其实PHP5.3版本开始,使用mysqlnd库,不再使用libmysq ...

  10. python函数: 内置函数

    forthttp://blog.csdn.net/pipisorry/article/details/44755423 Python内置函数 Python内置(built-in)函数随着python解 ...