今天继续研究了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函数的实现的更多相关文章

  1. 原生JS实现bind()函数

    一.bind()函数的两个特性: 1.bind和curring,函数科里化 function add(a, b, c) { var i = a+b+c; console.log(i); return ...

  2. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  3. 关于原生js中函数的三种角色和jQuery源码解析

    原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...

  4. js中bind解析

    一.arguments的含义 // arguments 是一个对应于传递给函数的参数的类数组对象 function a(){ console.log(arguments); } a(); // Arg ...

  5. js中getByClass()函数

    js中getByClass()函数进化史 对于js来说,我想每一个刚接触它的人都应该会抱怨:为什么没有一个通过class来获取元素的方法.尽管现在高版本的浏览器已经支持getElementsByCla ...

  6. 原生JS封装_new函数,实现new关键字的功能

    1.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 2.原生 ...

  7. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  8. JS中的函数,Array对象,for-in语句,with语句,自定义对象,Prototype

    一)函数 A)JS中的函数的定义格式: function add(a,b) { var sum = a+b; document.write("两个数的和是:" + sum); // ...

  9. js中的函数,Date对象,Math对象和数组对象

    函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...

随机推荐

  1. ITU-T Technical Paper: NP, QoS 和 QoE的框架以及它们的区别

    本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...

  2. HBase Master 启动

    –>首先初始化HMaster –>创建一个rpcServer,其中并启动 –>启动一个Listener线程,功能是监听client的请求,将请求放入nio请求队列,逻辑如下: –&g ...

  3. linux内核自旋锁API

    我们大概都了解,锁这种机制其实是为了保护临界区代码的,关于使用和定义,我总结的API如下: #include <linux/spinlock.h> 定义自旋锁 spinlock_t loc ...

  4. nasm预处理器(3)

    nasm提供一个限定符.nolist,可以包含它到一个宏定义中,这样该宏就不会在列表文件中被展开:限定符 .nolist直接放到参数后面: %macro foo 1.nolist 条件汇编 和C预处理 ...

  5. obj-c编程09:块的语法

    在obj-c中,有一种和C截然不同的东西--块.块可以在外边定义,也可以在函数或方法内部定义,可以被赋值给一个变量,然后用该变量调用.默认情况下块对外部变量的访问只能读不能写,除非用__block显示 ...

  6. Nginx安装Nginx-echo模块

    Nginx-echo可以在Nginx中用来输出一些信息,是在测试排错过程中一个比较好的工具.它也可以做到把来自不同链接地址的信息进行一个汇总输出.总之能用起来可以给开发人员带来挺大帮助的.下面看看我们 ...

  7. 大数据批量导入,解决办法,实践从定时从 sqlserver 批量同步数据到 mySql

    c#代码,批量导入数据代码 public class MySql_Target : ZFCommon.DataAccesser.Base.DABase { public MySql_Target() ...

  8. Symmetric Tree 对称树

    判断一棵二叉树是否为对称的树.如 1 / \ 2 2 / \ / \ 3 4 4 3 观察上面的树可以看出:左子树的右子树等于右子树的左子树,左子树的左子树等于右子树的右子树. 首先可以使用递归.递归 ...

  9. % 与 format 进行字符串格式化

    字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 1.百分号方式 %[(name)][flags][width].[precision]typecode (name) ...

  10. aliyun ubuntu读取第三方源被forbidden的问题

    使用下面指令添加了一个源: sudo add-apt-repository ppa:webupd8team/java 然后update的时候提示: W: Failed to fetch http:// ...