关于原生js中bind函数的实现
今天继续研究了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函数的实现的更多相关文章
- 原生JS实现bind()函数
一.bind()函数的两个特性: 1.bind和curring,函数科里化 function add(a, b, c) { var i = a+b+c; console.log(i); return ...
- 【转载】JS中bind方法与函数柯里化
原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...
- 关于原生js中函数的三种角色和jQuery源码解析
原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...
- js中bind解析
一.arguments的含义 // arguments 是一个对应于传递给函数的参数的类数组对象 function a(){ console.log(arguments); } a(); // Arg ...
- js中getByClass()函数
js中getByClass()函数进化史 对于js来说,我想每一个刚接触它的人都应该会抱怨:为什么没有一个通过class来获取元素的方法.尽管现在高版本的浏览器已经支持getElementsByCla ...
- 原生JS封装_new函数,实现new关键字的功能
1.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 2.原生 ...
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- JS中的函数,Array对象,for-in语句,with语句,自定义对象,Prototype
一)函数 A)JS中的函数的定义格式: function add(a,b) { var sum = a+b; document.write("两个数的和是:" + sum); // ...
- js中的函数,Date对象,Math对象和数组对象
函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...
随机推荐
- gtk+修改控件文本字体一例
因为家里电脑是Mac系统,所以就拿Mac系统来示范. 要注意的是gtk+2.0和3.0对字体的处理是有一些区别的: 1.后者使用的是pango的机制,我们这里以gtk+3.0为基础. 2.两者调用Fo ...
- 拆轮子之Fish动画分析
概述 最近发现一个很好玩的动画库,纯代码实现的而不是通过图片叠加唬人的,觉得很有意思看了下源码https://github.com/dinuscxj/LoadingDrawable, 这个动画效果使用 ...
- PS 滤镜——素描算法(一)
这个算法结合高斯滤波和图层混合中的颜色减淡模式实现. 可以参考相关博客: http://blog.csdn.net/wsfdl/article/details/7610634 本文增加了一点调色,使得 ...
- 面试之路(6)-BAT面试之操作系统内存详解
本文主要参考两篇博客,读后整理出来,以供大家阅读,链接如下: http://blog.jobbole.com/95499/?hmsr=toutiao.io&utm_medium=toutiao ...
- 开发Oracle 函数
函数用于返回特定的数据.如果在应用程序中,经常需要执行SQL语句来返回特定数据,那么可以基于这些操作建立特定的函数.建立函数的语法如下: CREATE [OR REPLACE] FUNCTION fu ...
- rubygem若干常用选项参数
可以用gem help commands看所有支持的参数,这个比gem -h显示的全: wisy@wisy-ThinkPad-X61:~/src/ruby_src$ gem help commands ...
- vue学习:props,scope,slot,ref,is,slot,sync等知识点
1.ref :为子组件指定一个索引 ID,给元素或者组件注册引用信息.refs是一个对象,包含所有的ref组件. <div id="parent"> <user- ...
- java虚拟机的类加载机制
引言 我们写的代码是放在.java文件中,经过编译器编译后,转成.class文件.Class文件是一串二进制流,它可以被各平台的虚拟机所接受,实现跨平台. 虚拟机将描述类的数据从class文 ...
- % 与 format 进行字符串格式化
字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 1.百分号方式 %[(name)][flags][width].[precision]typecode (name) ...
- redis主从,哨兵回忆手册
redis主从 持久化的开启与主从集群是否生效无关系 Slave Server同样是以非阻塞的方式完成数据同步.在同步期间,如果有客户端提交查询请求,Redis则返回同步之前的数据(注意初次同步则会阻 ...