「观感度：🌟🌟🌟🌟🌟」
「口味：蟹黄豆腐」
「烹饪时间：5min」
本文已收录在前端食堂同名仓库
Githubgithub.com/Geekhyt，欢迎光临食堂，如果觉得酒菜还算可口，赏个 Star 对食堂老板来说是莫大的鼓励。
从略带银丝的头发和干净利落的步伐我察觉到，面前坐着的这个面试官有点深不可测。我像往常一样，准备花 3 分钟的时间给面试官来一套昨天晚上精心准备的自我介绍。我自信且得意的诉说着对过往项目所付出的心血，所做的优化取得了怎样的成果，为公司提高了多少的收入。。。
显然，面试官对我说的数字很感兴趣，嘴角微微上扬，经过了一番细节的探讨和技术的对线后。面试官拿出了一张纸。
手写代码。
注重基础的面试官是靠谱的，为了征服他，我一边讲解着实现原理一边写出了代码。
手写 call
call 和 apply 的区别：call 方法接收的是一个参数列表，apply 方法接收的是一个包含多个参数的数组。
- 1.
context存在就使用context，否则是window - 2.使用
Object(context)将context转换成对象，并通过context.fn将this指向context - 3.循环参数，注意从
1开始，第0个是上下文，后面才是我们需要的参数 - 4.将参数字符串
push进args - 5.字符串和数组拼接时，数组会调用
toString方法，这样可以实现将参数一个个传入，并通过eval执行 - 6.拿到结果返回前，删除掉
fn
Function.prototype.call = function(context) {
context = context ? Object(context) : window;
context.fn = this;
let args = [];
for (let i = 1; i < arguments.length; i++) {
args.push('arguments['+ i +']');
}
let res = eval('context.fn('+ args +')');
delete context.fn;
return res;
}
手写 apply
- 1.
apply无需循环参数列表，传入的args就是数组 - 2.但是
args是可选参数，如果不传入的话，直接执行
Function.prototype.apply = function(context, args) {
context = context ? Object(context) : window;
context.fn = this;
if (!args) {
return context.fn();
}
let res = eval('context.fn('+ args +')');
delete context.fn;
return res;
}
手写 bind
- 1.
bind的参数可以在绑定和调用的时候分两次传入 - 2.
bindArgs是绑定时除了第一个参数以外传入的参数，args是调用时候传入的参数，将二者拼接后一起传入 - 3.如果使用
new运算符构造绑定函数，则会改变this指向，this指向当前的实例 - 4.通过
Fn链接原型，这样fBound就可以通过原型链访问父类Fn的属性
Function.prototype.bind = function(context) {
let that = this;
let bindArgs = Array.prototype.slice.call(arguments, 1);
function Fn () {};
function fBound(params) {
let args = Array.prototype.slice.call(arguments) ;
return that.apply(this instanceof fBound ? this : context, bindArgs.concat(args));
}
Fn.prototype = this.prototype;
fBound.prototype = new Fn();
return fBound;
}
手写 new
- 1.
Constructor就是new时传入的第一个参数，剩余的arguments是其他的参数 - 2.使用
obj.__proto__ = Constructor.prototype继承原型上的方法 - 3.将剩余的
arguments传给Contructor，绑定this指向为obj，并执行 - 4.如果构造函数返回的是引用类型，直接返回该引用类型，否则返回
obj
const myNew = function() {
let Constructor = Array.prototype.shift.call(arguments);
let obj = {};
obj.__proto__ = Constructor.prototype;
let res = Constructor.apply(obj, arguments);
return res instanceof Object ? res : obj;
}
手写 instanceOf
- 1.在
left的原型链中层层查找，是否有原型等于prototype - 2.确定边界条件，如果
left === null，即找到头没找到返回false，right === left，即找到返回true - 3.
left = left.__proto__，不停的向上查找
const myInstanceof = function(left, right) {
right = right.prototype;
left = left.__proto__;
while (true) {
if (left === null) {
return false;
}
if (right === left) {
return true;
}
left = left.__proto__;
}
}
手写 Object.create
- 新建一个空的构造函数
F，然后让F.prototype指向obj，最后返回F的实例
const myCreate = function (obj) {
function F() {};
F.prototype = obj;
return new F();
}
❤️爱心三连击
1.看到这里了就点个赞支持下吧，你的「赞」是我创作的动力。
2.关注公众号前端食堂，「你的前端食堂，记得按时吃饭」！
3.本文已收录在前端食堂Github github.com/Geekhyt，求个小星星，感谢Star。
