JavaScript手动实现call方法
·
call
- 简易版(不支持传参的方法)实现思路:
- 给目标对象创建一个属性,将要调用的方法绑定到这个属性上
- 直接运行刚刚创建的属性
- 删除这个属性
这样就间接绑定了this的指向,并实现了call
Function.prototype.mycall=function(con){
//给Function的原型对象上加上mycall方法
con.fun = this; //this即为要绑定的方法
con.fun();
delete con.fun;
}
let obj1 = {
name:"helloworld"
}
function fn(){
console.log(this.name);
}
fn.call(obj1); //helloworld
fn.mycall(obj1); //helloworld
- 中等版,支持传参函数的call实现思路
- 主要思路如上,不一样的是要通过arguments取出除第一位之外的所有参数放到一个数组里,然后通过展开运算符给要执行的函数或方法传参,如下:
Function.prototype.mycall = function(con){
con.fun = this; //给目标对象新建一个属性,绑定这个函数
let paramsArr = new Array(); //新建一个空数组
for(let i=1;i<arguments.length;i++){
paramsArr.push(arguments[i]);
}
con.fun(...paramsArr); //运行一下
delete con.fun; //删除目标对象上的fun属性
}
let testObj = { //定义一个对象
num1:10,
num2:9.5
}
function add(p1,p2,p3){ //定义函数
console.log(this.num1+this.num2+p1+p2+p3);
}
add.call(testObj,1,2,3); //原生call 25.5
add.mycall(testObj,1,2,3);//实现的call 25.5
- 最终版(没有参数时,指向window)
Function.prototype.mycall = function(con){
con = new Object(con) || window || global;
con.fun = this; //给目标对象新建一个属性,绑定这个函数
let paramsArr = new Array(); //新建一个空数组
for(let i=1;i<arguments.length;i++){
paramsArr.push(arguments[i]);
}
con.fun(...paramsArr); //运行一下
delete con.fun; //删除目标对象上的fun属性
}
// let testObj = { //定义一个对象
// num1:10,
// num2:9.5
// }
function conso(p1,p2,p3){
//定义函数
console.log(this.num1,this.num2,p1,p2,p3);
}
conso.call(1,2,3); //原生call undefined undefined 2 3 undefined
conso.mycall(1,2,3);//实现的call undefined undefined 2 3 undefined
📦 前端资源合集 | 持续更新
🟢 前端0到1【持续更新】→ https://pan.quark.cn/s/5df55ccff7c4
🔵 前端进阶【持续更新】→ https://pan.quark.cn/s/2dec1c87b3ec
🟣 前端2026最新【持续更新】→ https://pan.quark.cn/s/77c8fa94161c
🔴 AI最新学习资料 → https://pan.baidu.com/s/1P9X2Qk_Fby3rFNVGw_WKow?pwd=46XG 提取码:46XG
觉得有用就点个赞+收藏,关注我持续分享前端干货 💡
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐

所有评论(0)