手写bind是大厂中的一个高频的面试题,如果面试的中高级前端,只是能说出它们的区别,用法并不能脱颖而出,理解要有足够的深度才能抱得offer归!
思路
拷贝源函数:
通过变量储存源函数
使用Object.create复制源函数的prototype给fToBind
返回拷贝的函数
调用拷贝的函数:
new调用判断:通过instanceof判断函数是否通过new调用,来决定绑定的context
绑定this+传递参数
返回源函数的执行结果
Function.prototype.myBind = function (objThis, ...params) { const thisFn = this; // 存储源函数以及上方的params(函数参数) let fToBind = function () { const isNew = this instanceof fToBind // this是否是fToBind的实例 也就是返回的fToBind是否通过new调用 const context = isNew ? this : Object(objThis) // new调用就绑定到this上,否则就绑定到传入的objThis上 return thisFn.apply(context, params); // 用apply调用源函数绑定this的指向并传递参数,返回执行结果 }; fToBind.prototype = Object.create(thisFn.prototype); // 复制源函数的prototype给fToBind return fToBind; // 返回拷贝的函数 }; 小结本来以为这篇会写的很快,结果断断续续的写了好几天,终于把这三个API相关知识介绍清楚了,希望大家看完之后,面试的时候再遇到这个问题,就可以海陆空全方位的装逼了^_^
觉得我的博客对你有帮助的话,就给我点个Star吧!前端进阶积累、公众号、GitHub、wx:OBkoro1、邮箱:obkoro1@foxmail.com