手撸call apply bind
25-04-07
slbcun
610℃
0
如果自己去实现call apply bind,看上去挺复杂,写起来其实就几行代码 因为call和apply一样,只是传参不一样,所以我就只写一个call
实现call(其实只有2行代码)
/* 随便定义一个对象,待会将函数内的this指向指向倒这个对象 */ const obj = { name: "我是需要被绑定改变this指向的对象" }; /* 需要改变this指向的函数,没有使用call时,this指向window */ function fn(arg) { console.log("fn---------", this); console.log("fn---------", arg); } /* * * 重写call方法 * target 需要把this改变到哪个目标 * args 传递进来的参数 */ Function.prototype.call = function (target, ...args) { /* 这里的this就指向上面的fn函数 */ console.log(this); /* 随便定义一个变量,用于在目标对象里存fn函数,这里使用symbol更好 */ target["vhan"] = this; /* 这样target目标上就有个vhan的属性,并且属性值就是fn函数 */ console.log(target); /* 调用这个vhan,并把参数传入进去就实现this改变了 */ target["vhan"](args); /* 防止给target上多出多余没用的参数,在将vhan删除掉 */ delete target["vhan"]; }; fn.call(obj, "我是大帅哥");
实现bind
因为bind的调用方式,是返回一个新函数,在调用一次,例如:fn.bind(null)(options),所以需要用到高阶函数
/* 随便定义一个对象,待会将函数内的this指向指向倒这个对象 */ const obj = { name: "我是需要被绑定改变this指向的对象" }; /* 需要改变this指向的函数,没有使用call时,this指向window */ function fn(arg) { console.log("fn---------", this); console.log("fn---------", arg); } /* * * 重写call方法 * target 需要把this改变到哪个目标 * args 传递进来的参数 */ Function.prototype.bind = function (target) { target["vhan"] = this; /* 这里使用高阶函数接收参数 */ return (...args) => { target["vhan"](args); delete target["vhan"]; }; }; fn.bind(obj)("我是大帅哥!!!");