关于原生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实现的DES加密示例
Oct 30 Javascript
js中for in的用法示例解析
Dec 25 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 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常用函数小技巧
2008/09/11 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
php使用websocket示例详解
2014/03/12 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
简单实现php上传文件功能
2017/09/21 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python实现图片转字符画的示例
2017/08/22 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
python对文件的操作方法汇总
2020/02/28 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
理财投资建议书
2014/03/12 职场文书
委托书模板
2014/04/04 职场文书
媒体宣传策划方案
2014/05/25 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
鼋头渚导游词
2015/02/05 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python