关于原生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 相关文章推荐
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
javascript的BOM汇总
2015/07/16 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
vue环形进度条组件实例应用
2018/10/10 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
python打包生成so文件的实现
2020/10/30 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
车辆工程专业求职信
2014/06/14 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
2016新年慰问信范文
2015/03/25 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
律政俏佳人观后感
2015/06/09 职场文书
小学教师见习总结
2015/06/23 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA