点击上方“IT平头哥联盟”,选择“置顶或者星标”
与您一起成长~
bind的实现分析,若川大佬带你飞~
前言
用过React的同学都知道,经常会使用bind来绑定this。
import React, { Component }
那么面试官可能会问是否想过new到底做了什么,怎么模拟实现呢。
附上之前写文章写过的一段话:已经有很多模拟实现
bind
的文章,为什么自己还要写一遍呢。学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。只有自己去登山,才能看到不一样的风景,体会才更加深刻。
先看一下bind是什么。从上面的React代码中,可以看出bind执行后是函数,并且每个函数都可以执行调用它。
眼见为实,耳听为虚。读者可以在控制台一步步点开例子1中的obj:
var obj = {};
因此可以得出结论1:
1、bind
是Functoin原型链中Function.prototype的一个属性,每个函数都可以调用它。
2、bind
本身是一个函数名为bind的函数,返回值也是函数,函数名是bound 。(打出来就是bound加上一个空格)。
知道了bind是函数,就可以传参,而且返回值'bound '也是函数,也可以传参,就很容易写出例子2:
后文统一 bound 指原函数original bind之后返回的函数,便于说明。
var obj = {
由此可以得出结论2:
1、调用bind的函数中的this指向bind()函数的第一个参数。
2、传给bind()的其他参数接收处理了,bind()之后返回的函数的参数也接收处理了,也就是说合并处理了。
3、并且bind()后的name为bound + 空格 + 调用bind的函数名。如果是匿名函数则是bound + 空格。
4、bind后的返回值函数,执行后返回值是原函数(original)的返回值。
5、bind函数形参(即函数的length)是1。bind后返回的bound函数形参不定,根据绑定的函数原函数(original)形参个数确定。
根据结论2:我们就可以简单模拟实现一个简版bindFn
// 第一版 修改this指向,合并参数
如果面试官看到你答到这里,估计对你的印象60、70分应该是会有的。
但我们知道函数是可以用new来实例化的。那么bind()返回值函数会是什么表现呢。
接下来看例子3:
var obj = {
从例子3种可以看出this指向了new bound()生成的新对象。
可以分析得出结论3:
1、bind原先指向obj的失效了,其他参数有效。
2、new bound的返回值是以original原函数构造器生成的新对象。original原函数的this指向的就是这个新对象。
另外前不久写过一篇文章:面试官问:能否模拟实现JS的new操作符。简单摘要:
new做了什么:
1.创建了一个全新的对象。
2.这个对象会被执行[[Prototype]](也就是proto)链接。
3.生成的新对象会绑定到函数调用的this。
4.通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。
5.如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用会自动返回这个新的对象。
所以相当于new调用时,bind的返回值函数bound内部要模拟实现new实现的操作。
话不多说,直接上代码。
// 第三版 实现new调用
面试官看到这样的实现代码,基本就是满分了,心里独白:这小伙子/小姑娘不错啊。不过可能还会问this instanceof bound不准确问题。
上文注释中提到this instanceof bound也不是很准确,ES6 new.target很好的解决这一问题,我们举个例子4:
`instanceof` 不准确,`ES6 new.target`很好的解决这一问题
function Student(name){
细心的同学可能会发现了这版本的代码没有实现bind后的bound函数的nameMDN Function.name和lengthMDN Function.length。面试官可能也发现了这一点继续追问,如何实现,或者问是否看过es5-shim的源码实现L201-L335。如果不限ES版本。其实可以用ES5的Object.defineProperties来实现。
Object.defineProperties(bound, {
'length': {
value: self.length,
},
'name': {
value: 'bound ' + self.name,
}
});
es5-shim的源码实现bind
直接附上源码(有删减注释和部分修改等)
var $
你说出es5-shim
源码bind
实现,感慨这代码真是高效、严谨。面试官心里独白可能是:你就是我要找的人,薪酬福利你可以和HR去谈下。
最后总结一下
1、bind是Function原型链中的Function.prototype的一个属性,它是一个函数,修改this指向,合并参数传递给原函数,返回值是一个新的函数。
2、bind返回的函数可以通过new调用,这时提供的this的参数被忽略,指向了new生成的全新对象。内部模拟实现了new操作符。
3、es5-shim源码模拟实现bind时用Function实现了length。
事实上,平时其实很少需要使用自己实现的投入到生成环境中。但面试官通过这个面试题能考察很多知识。比如this指向,原型链,闭包,函数等知识,可以扩展很多。
读者发现有不妥或可改善之处,欢迎指出。另外觉得写得不错,可以点个赞,也是对笔者的一种支持。
文章中的例子和测试代码放在github中bind模拟实现 github。bind模拟实现 预览地址 F12看控制台输出,结合source面板查看效果更佳。
// 最终版 删除注释 详细注释版请看上文
参考
OshotOkill翻译的 深入理解ES6 简体中文版 - 第三章 函数(虽然我是看的纸质书籍,但推荐下这本在线的书)
MDN Function.prototype.bind
冴羽: JavaScript深入之bind的模拟实现
《react状态管理与同构实战》侯策:从一道面试题,到“我可能看了假源码”
关于
作者:常以轩辕Rowboat为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少,唯善学。
博客:https://lxchuan12.github.io/
PS:福利,转发本公众号任意一篇文章到朋友圈集20个赞,即可获取掘金小册5折码哦!
- end -
用心分享 一起成长 做有温度的攻城狮
每天记得对自己说:你是最棒的!
推荐阅读
如何给localStorage设置一个过期时间?
面对裁员,你还敢说老了真学不动了吗?
浅谈柯里化与反柯里化~
全栈资源共享 一起成长,努力成为你想成为的样子
webpack4配置详解之常用插件分享
几个神奇的Web Api,你(可能)不知道~
喜欢就给个“好看”吧!