关于原生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动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
深入Vue-Router路由嵌套理解
Aug 13 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
js实现文章目录索引导航(table of content)
May 10 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
web方式ftp
2006/10/09 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
python自定义类并使用的方法
2015/05/07 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Django自定义manage命令实例代码
2018/02/11 Python
python书籍信息爬虫实例
2018/03/19 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python编写微信公众号首图思路详解
2019/12/13 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
总经理驾驶员岗位职责
2013/12/04 职场文书
行政专员工作职责
2013/12/22 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
领导检查欢迎词
2014/01/14 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
mysql创建存储过程及函数详解
2021/12/04 MySQL
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python