今天继续研究了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. charles抓取https请求包

    说明: 用charles抓取https请求,会出现SSL Proxying disabled in Proxy Settings这样的提示,如下图.要通过charles抓取数据,还需要进行一些简单的设 ...

  2. HBase快照

    CDH是Cloudera的完全开源分布式Apache Hadoop及相关项目(包括Apache HBase).CDH的当前版本(4.2)引入的一个HBase新特性最近加入到了主干中,允许用户对指定表进 ...

  3. 恶补web之八:jQuery(3)

    jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...

  4. Salesforce的数据权限机制

    本文主要介绍了 Salesforce 对于系统中数据的访问控制是如何设计的,然后也了解了下 Alfresco 和 Oracle VPD 的数据权限机制.希望对一些业务系统的数据权限的访问控制设计能有所 ...

  5. Dapper.SimpleCRUD mysql 插入数据时出现的小插曲

    最近想玩一下.net dapper,然后在nuget包中搜索看到了 Dapper.SimpleCRUD ,然后我等好奇心重的小骚年,内心又开始跃跃欲试. 使用sqlserver数据库时没有遇到问题,既 ...

  6. DB2许可证文件

    与 DB2® 数据库产品相关联的许可证文件有两种类型: 基本许可证密钥和 完整许可证密钥.这些许可证密钥以纯文本格式存储,通常称为 许可证文件或 许可证权利证书. "基本"许可证未 ...

  7. javascript学习(二)javascript常见问题总结

    在js使用过程中,经常会碰到一些问题,本人利用闲暇时间整理了一些常见问题的解决方法,贴出来和大家分享,有需要的朋友可以参考下 1.JS中方法和变量都是区分大小写的  2.单引号.双引号在JS中没有特殊 ...

  8. storm中的Scheduler

    Scheduler是storm的调度器,负责为topology分配当前集群中可用的资源.Storm分别提供了3中调度器: EvenScheduler:会将系统中的可用资源均匀地分配给当前需要任务分配的 ...

  9. Java 理论与实践: 并发集合类

    Java 理论与实践: 并发集合类 DougLea的 util.concurrent 包除了包含许多其他有用的并发构造块之外,还包含了一些主要集合类型 List 和 Map 的高性能的.线程安全的实现 ...

  10. 交换机设置IP

    二成交换机所有端口在默认情况下都是属于vlan1的 代表整个交换机 你只需要设置vlan1的ip地址就行了 进入交换机配置界面后 命令如下:enableconfigure terminalinterf ...