男女做暖暖暖网站,微博短网址生成,制作一个在线收费网站,装修设计公司排行文章目录 一、作用二、区别applycallbind小结 三、实现 一、作用 call、apply、bind作用是改变函数执行时的上下文#xff0c;简而言之就是改变函数运行时的this指向 那么什么情况下需要改变this的指向呢#xff1f;下面举个例子 var name lucy; var obj {n… 文章目录 一、作用二、区别applycallbind小结 三、实现 一、作用 call、apply、bind作用是改变函数执行时的上下文简而言之就是改变函数运行时的this指向 那么什么情况下需要改变this的指向呢下面举个例子 var name lucy; var obj {name: martin,say: function () {console.log(this.name);} }; obj.say(); // martinthis 指向 obj 对象 setTimeout(obj.say,0); // lucythis 指向 window 对象从上面可以看到正常情况say方法输出martin 但是我们把say放在setTimeout方法中在定时器中是作为回调函数来执行的因此回到主栈执行时是在全局执行上下文的环境中执行的这时候this指向window所以输出lucy 我们实际需要的是this指向obj对象这时候就需要该改变this指向了 setTimeout(obj.say.bind(obj),0); //martinthis指向obj对象二、区别 下面再来看看apply、call、bind的使用 apply apply接受两个参数第一个参数是this的指向第二个参数是函数接受的参数以数组的形式传入 改变this指向后原函数会立即执行且此方法只是临时改变this指向一次 function fn(...args){console.log(this,args); } let obj {myname:张三 }fn.apply(obj,[1,2]); // this会变成传入的obj传入的参数必须是一个数组 fn(1,2) // this指向window当第一个参数为null、undefined的时候默认指向window(在浏览器中) fn.apply(null,[1,2]); // this指向window fn.apply(undefined,[1,2]); // this指向windowcall call方法的第一个参数也是this的指向后面传入的是一个参数列表 跟apply一样改变this指向后原函数会立即执行且此方法只是临时改变this指向一次 function fn(...args){console.log(this,args); } let obj {myname:张三 }fn.call(obj,1,2); // this会变成传入的obj传入的参数必须是一个数组 fn(1,2) // this指向window同样的当第一个参数为null、undefined的时候默认指向window(在浏览器中) fn.call(null,[1,2]); // this指向window fn.call(undefined,[1,2]); // this指向windowbind bind方法和call很相似第一参数也是this的指向后面传入的也是一个参数列表(但是这个参数列表可以分多次传入) 改变this指向后不会立即执行而是返回一个永久改变this指向的函数 function fn(...args){console.log(this,args); } let obj {myname:张三 }const bindFn fn.bind(obj); // this 也会变成传入的obj bind不是立即执行需要执行一次 bindFn(1,2) // this指向obj fn(1,2) // this指向window小结 从上面可以看到apply、call、bind三者的区别在于 三者都可以改变函数的this对象指向三者第一个参数都是this要指向的对象如果如果没有这个参数或参数为undefined或null则默认指向全局window三者都可以传参但是apply是数组而call是参数列表且apply和call是一次性传入参数而bind可以分为多次传入bind是返回绑定this之后的函数apply、call 则是立即执行 三、实现 实现bind的步骤我们可以分解成为三部分 修改this指向动态传递参数 // 方式一只在bind中传递函数参数 fn.bind(obj,1,2)()// 方式二在bind中传递函数参数也在返回函数中传递参数 fn.bind(obj,1)(2)兼容new关键字 整体实现代码如下 Function.prototype.myBind function (context) {// 判断调用对象是否为函数if (typeof this ! function) {throw new TypeError(Error);}// 获取参数const args [...arguments].slice(1),fn this;return function Fn() {// 根据调用方式传入不同绑定值return fn.apply(this instanceof Fn ? new fn(...arguments) : context, args.concat(...arguments)); } }希望本文能够对您有所帮助如果您有任何问题或建议请随时在评论区留言联系 章挨踢章IT 谢谢阅读