JS封装自己的call、apply和bind方法详解

发布网友发布时间：2024-10-05 10:55

共1个回答

热心网友时间：2024-10-09 06:05

在封装之前我们先来复习一下this指向。

所谓的this其实可以理解成一根指针：其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象,这就是精髓。最关键所在

this的四种指向：当this所在的函数被普通调用时，指向window，如果当前是严格模式，则指向undefined

当this所在当函数被以obj.fn()形式调用时，指向obj

当call,apply加入后，this的指向被改变了

此时控制台并没有代码输出，因为bind会重新生成并且返回一个函数，这个函数的this指向第一个参数

function a() { console.log(this.name); } const b = { name: "segmentFault" } a.bind(b, 1, 2, 3)此时输出segmentFault

正式开始自己实现call :

在函数原型上定义自己的myCall方法：

Function.prototype.myCall = function (context, ...arg) { const fn = Symbol('临时属性') context[fn] = this context[fn](...arg) delete context[fn] }

四行代码实现了简单的call，思路如下：

为了简化，今天都不做类型判断和错误边际处理，只把原理讲清楚。

自己实现apply：

//实现自己的myApply Function.prototype.myApply = function (context, arg) { const fn = Symbol('临时属性') context[fn] = this context[fn](...arg) delete context[fn] } const obj2 = { a: 1 } test.myApply(obj2, [2, 3, 4])

同理，只是apply传递的第二个参数是数组，这里我们只需要在调用时，将参数用...把数组展开即可

自己实现bind：

bind跟apply,call的本质区别，bind不会改变原函数的this指向，只会返回一个新的函数（我们想要的那个this指向），并且不会调用。但是apply和call会改变原函数的this指向并且直接调用

Function.prototype.myBind = function (objThis, ...params) { const thisFn = this; // 存储源函数以及上方的params(函数参数) // 对返回的函数 secondParams 二次传参 let fToBind = function (...secondParams) { console.log('secondParams',secondParams,...secondParams) const isNew = this instanceof fToBind // this是否是fToBind的实例也就是返回的fToBind是否通过new调用 const context = isNew ? this : Object(objThis) // new调用就绑定到this上,否则就绑定到传入的objThis上 return thisFn.call(context, ...params, ...secondParams); // 用call调用源函数绑定this的指向并传递参数,返回执行结果 }; fToBind.prototype = Object.create(thisFn.prototype); // 复制源函数的prototype给fToBind return fToBind; // 返回拷贝的函数 };

学习需要循序渐进，建议根据本文顺序去封装一遍，是比较轻松的，当然bind还需要判断是否是new调用.