bind函数polyfill源码解析
准备知识
使用new来调用函数会自动执行下面的操作:
- 创建一个全新的对象
- 这个新对象会被执行原型连接
- 这个新对象会绑定到函数调用的this
- 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象
注意this绑定规则,new操作具有最高的优先级
《你不知道的JavaScript(上卷)》提供了一个例子,bar被硬绑定到obj上,但是new bar(3) 并没有像我们预计的那样把obj.a修改为3。相反,new修改了硬绑定调用bar()中的this。因为使用了new绑定,我们得到了一个名字为baz的新对象,并且baz.a的值为3。
function foo(something) {this.a = something
}
var obj = {}
var bar = foo.bind(obj)
bar(2)
console.log(obj.a) //2
var baz = new bar(3)
console.log(obj.a) //2
console.log(baz.a) //3
instanceof运算符的第一个变量是一个对象,暂时称为A;第二个变量一般是一个函数,暂时称为B。
instanceof判断准则:沿着A的__proto__这条线来找,同时沿着B的prototype这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回true。
源码分析
MDN上提供的polyfill如下,主要的疑惑点应该就是 this instanceof fNOP 作用是什么?
if (!Function.prototype.bind) {Function.prototype.bind = function(oThis) {if (typeof this !== '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 // 这段代码会判断硬绑定函数是否是被new调用,如果是的话就会使用新创建的this替换硬绑定的this? this: oThis,aArgs.concat(Array.prototype.slice.call(arguments)))}// 维护原型关系if (this.prototype) {// Function.prototype doesn't have a prototype propertyfNOP.prototype = this.prototype; }fBound.prototype = new fNOP()return fBound}
}
this instanceof fNOP 单独看是看不明白的,需要结合以下代码才能说明它的作用
if (this.prototype) {fNOP.prototype = this.prototype;
}
fBound.prototype = new fNOP()
首先我们要清楚:bind(...)会返回一个硬编码的新函数,它会把参数设置为this的上下文并调用原始函数。
重点就是bind(...)返回的是一个函数!函数!函数!这意味着可以对bind(...)返回的函数进行new操作,那么问题就来了。
this绑定中new操作具有最高的优先级,如果执行new操作,bind(...)应该不起作用,this应该指向new出来的新对象。
清楚了以上内容,我们开始阅读代码。
if (typeof this !== 'function') {throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable')}
bind(...)必须由函数调用,所以以上代码对this的类型进行检查,如果不是函数类型则抛出错误。
var aArgs = Array.prototype.slice.call(arguments, 1)
var fToBind = this
var fBound = function() {return fToBind.apply(this instanceof fNOP // 这段代码会判断硬绑定函数是否是被new调用,如果是的话就会使用新创建的this替换硬绑定的this? this: oThis,aArgs.concat(Array.prototype.slice.call(arguments)))}
aArgs获取传入的其它参数,fToBind获取需要硬绑定的函数,fBound为返回的绑定操作函数,我们先忽略fBound里面的内容,继续往下看。
if (this.prototype) {fNOP.prototype = this.prototype;
}
fBound.prototype = new fNOP()
我们假设对bind(...)返回的函数进行new操作(原型链如下),则this instanceof fNOP 为true,此时我们就知道执行了new操作,硬绑定的this不能生效,需要把this绑定到新生成的对象上。
如果没有进行new操作的话,就用apply模拟bind绑定,一切按照原计划进行。
最后我们分析一下维护原型关系的重要性,例子如下:
function Foo(){console.log(this.a);this.a=1;
}
Foo.prototype.show=function() {console.log(this.a)};
Foo(); // undefined
var obj1=new Foo();
obj1.show();var bar=Foo.bind({a:2});
bar(); // 2
var obj2=new bar();
obj2.show();
因为bind函数内部保持了原型关系的继承,所以对象obj2才能访问到原型上的show方法。
** 注意:Foo.show()是错误的,因为Foo的原型指向的是Function.prototype,只有Foo的实例才能调用show方法。
更多专业前端知识,请上 【猿2048】www.mk2048.com
bind函数polyfill源码解析相关推荐
- callback函数_Nodejs 源码解析 util.promisify 如何将 Callback 转为 Promise
Nodejs util 模块提供了很多工具函数.为了解决回调地狱问题,Nodejs v8.0.0 提供了 promisify 方法可以将 Callback 转为 Promise 对象. 工作中对于一些 ...
- underscoreJs中pluck函数的源码解析
9月份之后项目开始进入收尾期了,产品要上市,所以9月之后的两个月都在疯狂的改BUG.最近总算是基本结束了,只剩下扫尾的了.终于能静下心来好好研究技术了.最近遇到两个函数,分别是underscore中的 ...
- java的resize函数_Java源码解析HashMap的resize函数
hashmap的resize函数,用于对hashmap初始化或者扩容. 首先看一下该函数的注释,如下图.从注释中可以看到,该函数的作用是初始化或者使table的size翻倍.如果table是null, ...
- QT源码解析(一) QT创建窗口程序、消息循环和WinMain函数
版权声明 请尊重原创作品.转载请保持文章完整性,并以超链接形式注明原始作者"tingsking18"和主站点地址,方便其他朋友提问和指正. QT源码解析(一) QT创建窗口程序.消 ...
- cvHoughLines2霍夫直线检测函数详解及源码解析
转载请注明出处. 文章链接:https://blog.csdn.net/duiwangxiaomi/article/details/126406184 博文目录 一. 前言 二. cvHoughLin ...
- snabbdom源码解析(七) 事件处理
事件处理 我们在使用 vue 的时候,相信你一定也会对事件的处理比较感兴趣. 我们通过 @click 的时候,到底是发生了什么呢! 虽然我们用 @click绑定在模板上,不过事件严格绑定在 vnode ...
- CTPN源码解析5-文本线构造算法构造文本行
文本检测算法一:CTPN CTPN源码解析1-数据预处理split_label.py CTPN源码解析2-代码整体结构和框架 CTPN源码解析3.1-model()函数解析 CTPN源码解析3.2-l ...
- Vue源码解析(一)
前言:接触vue已经有一段时间了,前面也写了几篇关于vue全家桶的内容,感兴趣的小伙伴可以去看看,刚接触的时候就想去膜拜一下源码~可每次鼓起勇气去看vue源码的时候,当看到几万行代码的时候就直接望而却 ...
- usestate中的回调函数_React Hooks 源码解析(3):useState
React 源码版本: v16.11.0 源码注释笔记: airingursb/reactgithub.com 在写本文之前,事先阅读了网上了一些文章,关于 Hooks 的源码解析要么过于浅显.要么 ...
最新文章
- 【 C 】回调函数简记
- matlab分割字,matlab字符分割方法
- 乐鑫代理启明云端分享:用ESP32单片机控制LED教程示例
- VMware中的桥接模式、NAT(网络地址转换模式)、Host-only(主机模式):转自:http://blog.chinaunix.net/uid-11798538-id-3061551.html
- mysql关于死锁的优化_mysql死锁探究及优化
- 四川大学计算机专业贵州分数线,四川大学2016年在贵州省高考各专业录取分数线...
- el表达式里面fn的用法
- 虚拟机克隆MAC地址变更后的网络配置
- 190727每日一句
- 虚拟机下安装MSDN简体中文版win98SC_WIN98SE.exe
- edge打开pdf不显示印章_edge打开pdf后,draw功能栏怎么没了?
- 大数据时代中国“破障”
- Hexo next主题修改背景报 failed to locate @import file F:\blog\source\_data\styles.styl
- 游戏录制软件哪个好?游戏录制软件推荐
- 分享几个翻译PDF的软件给你
- 【36C++STL-常用容器----5、stack容器详解】
- 在pycharm2021.2中学习opencv图像处理,基于python3.9.7、pycharm完成配置
- 料箱输送线程序,有合流和分拣,个人认为精华部分是WCS和PLC的Socket接口和分拣控制程序
- arduino按钮控制led,按一次亮,再按灭
- quixel bridge导出材质卡住