关于原生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 相关文章推荐
Area 区域实现post提交数据的js写法
Apr 22 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
js闭包实现按秒计数
Apr 23 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
实例详解带参数的 npm script
May 28 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
详解Vue 的异常处理机制
Nov 30 Vue.js
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实现Ftp用户的在线管理的代码
2007/03/06 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
通过python3实现投票功能代码实例
2019/09/26 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
C#软件工程师英语面试题
2015/06/07 面试题
公司培训心得体会
2014/01/03 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
汇报材料怎么写
2014/12/30 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
选购到合适的激光打印机
2022/04/21 数码科技
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android