大家好，我是前端西瓜哥。
我之前写了一篇手写 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 = context[fn](...args);
// 删掉临时加的 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 形式。
结尾
手写 call，核心在于通过另一种修改 this 指向的方式：obj.fn() 执行时 this 会指向 obj 对象。
手写 apply 也是一样的逻辑，还能少写一个 slice 方法。
