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


Posted in Javascript onAugust 10, 2016

今天继续研究了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函数的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
JS验证不重复验证码
Feb 10 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 #Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 #Javascript
浅谈JS运算符&&和|| 及其优先级
Aug 10 #Javascript
浅谈jQuery中的checkbox问题
Aug 10 #Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 #Javascript
Three.js学习之网格
Aug 10 #Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 #Javascript
You might like
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
php封装的page分页类完整实例
2016/10/18 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
夜大自我鉴定
2013/10/31 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
滞留工资返还协议书
2014/10/19 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
首都博物馆观后感
2015/06/05 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
centos7安装mysql5.7经验记录
2022/05/02 Servers
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript