JavaScript之实现call,apply

132 阅读1分钟

call,apply的特点

在我们日常开发中已经用的很多了,主要是用来改变this指向。
有两个特点:
  • 改变当前函数的this指向
  • 让当前函数执行,并传递参数

call的实现

我们知道在函数调用的时候,函数点前面是谁,this就是谁,所以,我们可以把this需要指向的参数转成一个对象,并且把当前函数挂到这个对象上,然后调用这个对象上的函数。

Function.prototype.mycall = function (context) {
context = context ? Object(context) : window;
context.fn = this;
return context.fn()
} 
现在,已经实现了改变this指向,并让函数执行。
如果我们需要传递参数应该怎么做呢?
在调用函数时的传参,可以通过函数的arguments拿到。所以,
我们可以遍历arguments,把参数传递给函数,然后使用eval让函数执行

Function.prototype.mycall = function (context) {
    context = context ? Object(context) : window;
    context.fn = this;
    let args = [];
    for (let i = 1; i < arguments.length; i++) {
        args.push(arguments[i])
    }
    return eval('context.fn('+args.join()+')')
}

apply的实现

apply和call的区别是,参数传递方式不一样,所以我们只需要判断第二个参数是否存,如果存在就一定是一个数组,可以把这个数组传递个函数执行;如果不存在直接让函数执行就可以了。

Function.prototype.myapply = function (context,args) {
    context = context ? Object(context) : window;
    context.fn = this;
    if(args){
        return eval('context.fn('+args.join()+')')
    }
    return context.fn()
}

自此,我们就实现了我们自己的call和apply。