call,applay,bind的手动封装

call，applay,bind的封装

五一在家没事干，封装了原生js的call和apply,bind方法，封装api之前，需要熟悉call,applay,bind的用法，熟悉原型链等相关知识点，不熟悉的小伙伴可以先去看看这块的东西。下面直接进入正题
先科普一个知识点
Array.prototype.slice.call 把伪数组转换为真正的数组，所谓为数组也就是具有length属性的对象
call
Function.prototype.mycall=function(obj){
var obj=obj||window;
obj.p=this;//后期改变this指向
let emptyArray=[];
for(let i=1;i<arguments.length;i++){
emptyArray.push(arguments[i])
}
var result=eval(‘obj.p(’+emptyArray+’)’);//传参 不了解eval用法的可以自己找下相关资料
delete obj.p
return result;
}
function fun(a,b,c){
return a+b+c;
}
console.log(fun.mycall(null,1,2,3))
applay
applay和call写法稍微有点不一样，在封装applay方法之前，希望你了解toString 方法，主要是为了解决数组的隐式转换问题
Function.prototype.myapplay=function(obj){
var obj=obj||window;
obj.p=this;
console.log(arguments)
let res= Array.prototype.slice.call(arguments,1) 把伪数组转换为数组
var result=eval(‘obj.p(’+res+’)’);
delete obj.p;
return result;
}
function fun(a,b,c,d){
this.name=“李四”
console.log(obj)
return a+b+c+d;
}
let obj={
name:“张三”
}
console.log(fun.myapplay(obj,[1,2,3,10]))
bind
bind方法第一次调用时候返回一个一摸一样的函数体，第二次调用才是执行，还要知道的一点就是两个括号都可以传参，这里不做过多解释，封装如下
Function.prototype.mybind=function(obj){
obj=obj||window;
let that=this;
let arr=Array.prototype.slice.call(arguments);
return function(){
let brr=Array.prototype.slice.call(arguments)
return that.apply(obj,arr.concat(brr));
}
}
function fun(a,b,c,d){
return a+b+c+d
}
console.log(fun.mybind(1,2)(3,4))
以上就是我基于原生的api进行的手动封装，希望可以帮到你