JavaScript之call和apply的模拟实现 _JavaScript

大家好，我是你们的导师，我每天都会在这里给大家分享一些干货内容（当然了，周末也要允许老师休息一下哈）。昨天给大家分享了JAVAScript的闭包，今天给大家分享一下call和Apply的模拟实现。

1. call函数

一句话介绍 call：call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。举个例子：

文章插图

注意两点：

1）call 改变了 this 的指向，指向到 foo；
2）bar 函数执行了

2. 模拟实现第一步

那么我们该怎么模拟实现这两个效果呢？试想当调用 call 的时候，把 foo 对象改造成如下：

文章插图

这个时候 this 就指向了 foo，是不是很简单呢？但是这样却给 foo 对象本身添加了一个属性，这可不行呐！不过也不用担心，我们用 delete 再删除它不就好了。所以我们模拟的步骤可以分为：

1）将函数设为对象的属性
2）执行该函数
3）删除该函数

以上个例子为例，就是：

文章插图

fn 是对象的属性名，反正最后也要删除它，所以起成什么都无所谓。根据这个思路，我们可以尝试着去写第一版的 call2 函数：

文章插图

3. 模拟实现第二步

最一开始也讲了，call 函数还能给定参数执行函数。举个例子：
【JavaScript之call和apply的模拟实现】

文章插图

注意：传入的参数并不确定，这可咋办？不急，我们可以从 Arguments 对象中取值，取出第二个到最后一个参数，然后放到一个数组里。比如这样：

文章插图

不定长的参数问题解决了，我们接着要把这个参数数组放到要执行的函数的参数里面去。

文章插图

也许有人想到用 ES6 的方法，不过 call 是 ES3 的方法，我们为了模拟实现一个 ES3 的方法，要用到ES6的方法，好像……，嗯，也可以啦。但是我们这次用 eval 方法拼成一个函数，类似于这样：

eval('context.fn(' + args +')')

这里 args 会自动调用 Array.toString() 这个方法。所以我们的第二版克服了两个大问题，代码如下：