手撸call apply bind
25-04-07 04:43
634
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)("我是大帅哥!!!");
-
书享家 - 电子书爱好者的福音
电子书资源导航站,可以免费下载哦,网站保护kindle电子书,pdf电子书,漫画,杂志,有声读物等 6542 0 21-11-27 -
学法减分助手PRO小程序独立版
学法减分助手PRO小程序源码 交管推出个学法减分,每个驾驶员可以把被扣的6分,以看视频答题的形式学习回来,然后答题这个一共二十道题每道... 1099 0 24-06-19 -
ChromeAI – 无限量、离线使用的 Chrome Dev 内置 Gemini Nano 大语言模型
最新版本的 Chrome Dev 集成了大语言模型 Gemini Nano,可以让用户无限量、离线使用(需额外下载1.2GB 模型文件)。但目前只能通过控... 1324 0 24-07-03 -
地区选择三联动jquery
549 0 21-06-04 -
定向提升-英语阅读100题方法串讲(田静)
01.田静讲阅读-技巧专项课1.pdf02.田静讲阅读-技巧专项课2.pdf03.田静讲阅读-技巧专项课3.pdf05.田静讲阅读-技巧专项课5.pdf06.田静讲阅读-... 990 0 24-08-19 -
缓存数据不一致和并发竞争怎么处理?
七大缓存经典问题的第四个问题是数据不一致。同一份数据,可能会同时存在 DB 和缓存之中。那就有可能发生,DB 和缓存的数据不一致。如果... 1276 0 24-05-24 -
大学英语四级听力音频
大学英语四级听力真题音频-2015年12月第一套-世纪高教在线.mp3大学英语四级听力真题音频-2015年12月第二套-世纪高教在线.mp3大学英语四级听... 963 0 24-08-20 -
Generator、Ayncawait 等异步编程的语法糖
Generator 是 ES6 标准中的异步编程方式,而 async/await 是 ES7 标准中的。希望通过本讲的学习,你能对这两种编程方式有更深的理解... 1080 0 24-05-24
发表我的评论
共0条评论
- 这篇文章还没有收到评论,赶紧来抢沙发吧~