前端面试 js 你有多了解call,apply,bind? (4)

手写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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsfxzz.html