大家好，我是前端西瓜哥。

我之前写了一篇手写 bind 的文章，里面直接使用了原生 call 方法。

有读者说他面试的时候这个 call 也要求自己实现的。

那我们今天来手写 call。apply 的实现也是一样，蓝狮注册开户只是调用形式有点区别。

call 的用法
我们先看看 Function.prototype.call() 的用法。

call() 可以修改函数调用时 this 的指向，其余参数则会作为原函数的参数。

call 接收的参数：

第一个参数 thisArg。代表 this 将会被指向的值。如果不是对象，也会通过 Object() 方法转换为对象。如果是 null 或 undefined，this 则会指向全局对象（即 window 或 global），或在严格模式（ “use strict;” ）下，保持 undefined 或 null；
其余参数。第二个往后的参数则会传入到原函数中。
例子：

function sum(num1, num2) {
return this.val + num1 + num2;
}
const obj = { val: 1 };
sum.call(obj, 2, 3); // 6
上面代码中，this 指向了 obj。

Function.prototype.apply 也是类似，但它的参数是以数组的形式存在的。上面的 call 写法等价于：

sum.call(obj, [2, 3]);
call 的实现
JS 函数中的 this 指向是在运行时决定的，里面的规则比较多，但其中有一条是：

如果是通过 obj.fn() 执行时，this 会指向前面的 obj 对象。

那我们只要将传入对象和原方法进行拼接，拼成上面这个 对象.方法 的形式，执行时，this 就能乖乖指向我们传入的 thisArg 了。

实现如下：

Function.prototype.myCall = function(thisArg, …args) {
const context = Object(thisArg) || window;
// 构造唯一 key
const fn = Symbol();
// 组装成”对象.方法”形式并调用，来改变 this
context[fn] = this;
const ret = contextfn;
// 删掉临时加的 key，复原 thisArg
delete context[fn];
return ret;
}
这里我们用 Symbol() 创建了一个唯一的 key，是为了防止覆盖掉 thisArg 原有的同名属性。

执行完后，记得将这个 key 移除掉，防止污染 thisArg 对象。

如果面试官要你用 ES5 实现，那会复杂很多，我这里也给出实现吧。

在这之前，我们先来学点前置知识。

判断是否为严格模式
var strict = (function() { return !this })();
利用了严格模式下，如果没有指定 this（通过 bind、call、前面带对象等方式），就会得到 undefined 的机制。如果是非严格模式，this 会拿到全局变量。

fn(…args) 的 ES5 实现
ES6 的扩展运算符 … 能够将数组 args，进行拆分按顺序放到函数中。

const args = [4, 5, 6];
fn(…args);
// 等价于
fn(4, 5, 6);
那我们用 ES5，也能将数组拆分成一个参数塞到函数中吗？

可以，但我们要用一点奇技淫巧：Function 方法。

Function 方法用得比较少。它可以在运行时创建一个函数，最后一个参数是函数体内容，前面的参数则是函数的参数。

const sum = new Function(‘a’, ‘b’, ‘return a + b’);
sum(2, 6) // 8
fn(…args) 的 ES5 实现为：

function construct(fn, args) {
var list = [];
for (var i = 0; i < args.length; i++) {
list[i] = ‘a[‘ + i + ‘]’;
}
var f = new Function(‘fn’, ‘a’, ‘return fn(‘ + list.join(‘, ‘) + ‘)’);
return f(fn, args);
}
Function 方法可以根据参数长度，动态生成 new Function(‘fn’, ‘a’, ‘return fn(a[0], a[1])’) 形式的函数，来实现类似扩展运算符的效果。

还有种写法是用 eval，也能根据字符串动态生成可执行代码。

function construct(fn, a) {
var list = [];
for (var i = 0; i < a.length; i++) {
list[i] = ‘a[‘ + i + ‘]’;
}
return eval(‘fn(‘ + list.join(‘, ‘) + ‘)’);
}
但这种封装成一个函数的写法，会有 this 隐式丢失问题。蓝狮注册登陆比如执行 construct(dog.bark, [‘bark!’])，执行时 this 将不再指向对象 dog。

关于 this 的指向问题还是比较复杂的，以后我会专门写一篇文章来讲解 this。

call 的 ES5 实现
Function.prototype.myCall = function(thisArg/*, …args */) {
var context = Object(thisArg) || window;
context.fn = this;
// 偷懒用了 Array.prototype.slice + 原生 call
// 请读者自行实现 slice
var a = Array.prototype.slice.call(arguments, 1);
var list = [];
for (var i = 0; i < a.length; i++) {
list[i] = ‘a[‘ + i + ‘]’;
}
var ret = eval(‘context.fn(‘ + list.join(‘,’) + ‘)’);
delete context.fn; // 复原
return ret;
}
为了不被干扰，上面的代码实现 忽略掉了一些细节。

这里我没有用前面实现的 construct 方法，因为会丢失 this，所以直接用了 eval。
slice 请自行实现，不能用 Array.prototype.slice.call ，因为用了原生的 call。
我们用了一个字符串 ‘fn’ 来临时挂载函数，可能会和 thisArg 上的属性名冲突，但 ES5 又不能用 Symbol，这种情况下。更好的做法是生成一个随机的长字符串，用 hasOwnProperty 判断对象是否存在该属性，如果不存在就使用它。
this 不可调用时（即不是函数时），要抛出错误。
另外我的实现，没有考虑严格模式。严格模式下，如果 thisArg 是 undefined 或 null，直接执行原函数就行了，不需要拼装成 obj.fn 形式。