关于原生js中bind函数的简单实现

 更新时间:2016年08月10日 10:28:17   投稿:jingxian  
下面小编就为大家带来一篇关于原生js中bind函数的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

今天继续研究了bind函数的实现,也知道了shim和polyfill的说法,现在总结一下,

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 || window,
                aArgs.concat(Array.prototype.slice.call(arguments)));
    };

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

  return fBound;
 };
}

这是官方文档上的实现,我分二个方面来谈我要说的东西,

第一个是参数,agruments的使用

var aArgs = Array.prototype.slice.call(arguments, 1),这里是将bind函数的参数数组取出来,第一个参数不要(就是不要oThis)也就是要被绑定方法的那个对象,第二个是

aArgs.concat(Array.prototype.slice.call(arguments))); 这里是用了数组的方法,把参数插在参数数组后面,要注意,这个函数是要被return 出去然后执行的,他的参数数组是return出去的那个fBound函数的参数数组,所以上下两个参数数组是不一样的,有点像柯里化。

第二个是上下文,在其中上下文的变化比较难理解,bind函数主要就是为了绑定上下文来使用的

fToBind = this 这里是保存了对象的上下文,紧接着下面的apply方法让要被绑定的那个对象可以使用该上下文

fNOP.prototype = this.prototype;

fBound.prototype = new fNOP();

这里是以fNOP为中介把this.prototype这个原对象的属性给fBound,确保fBound是在定义的时候的那个上下文里面执行。本来

bound.prototype = self.prototype就可以将原属性集成过来了,但是这样两个对象属性都指向同一个地方,修改 bound.prototype 将会造成self.prototype 也发生改变,这样并不是我们的本意。所以通过一个空函数 nop 做中转,能有效的防止这种情况的发生。

以上这篇关于原生js中bind函数的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS控制静态页面传递参数并获取参数应用

    JS控制静态页面传递参数并获取参数应用

    这篇文章主要介绍了JS控制静态页面传递参数并获取参数应用的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • JavaScript中的执行环境和作用域链

    JavaScript中的执行环境和作用域链

    这篇文章主要介绍了JavaScript中的执行环境和作用域链,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • ​​​​​​​基于el-table和el-pagination实现数据的分页效果流程详解

    ​​​​​​​基于el-table和el-pagination实现数据的分页效果流程详解

    本文主要介绍了​​​​​​​基于el-table和el-pagination实现数据的分页效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-11-11
  • 利用Promise自定义一个GET请求的函数示例代码

    利用Promise自定义一个GET请求的函数示例代码

    这篇文章主要给大家介绍了关于如何利用Promise自定义一个GET请求的函数的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Promise具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • Javascript 读取操作Sql中的Xml字段

    Javascript 读取操作Sql中的Xml字段

    把Xml字段先读出来,然后用Js去操作,这样岂不是简单了许多,于是网上搜索了一些JS读Xml字段信息的方法
    2014-10-10
  • JS实现图片翻书效果示例代码

    JS实现图片翻书效果示例代码

    图片翻书效果想必大家都有见过吧,在本文将为大家介绍下使用js是如何实现的,具体的代码如下,感兴趣的朋友可以参考下
    2013-09-09
  • jstl中判断list中是否包含某个值的简单方法

    jstl中判断list中是否包含某个值的简单方法

    下面小编就为大家带来一篇jstl中判断list中是否包含某个值的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 详解JavaScript中常用的函数类型

    详解JavaScript中常用的函数类型

    这篇文章主要介绍了三种JavaScript中常用的函数类型,包括匿名函数、动态函数、可变参数函数,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 关于JavaScript数组对象去重的几种方法

    关于JavaScript数组对象去重的几种方法

    这篇文章主要介绍了关于JavaScript数组对象去重的几种方法,不管是map对象的特性还是reduce方法都是很好用的去重方法,需要的朋友可以参考下
    2023-04-04
  • js实现拖动模态框

    js实现拖动模态框

    这篇文章主要为大家详细介绍了js实现拖动模态框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论