前端面试题：Call的用法及实现

2023-02-28

this call fn

大家好，我是前端西瓜哥。我之前写了一篇手写bind的文章，里面直接使用了原生call方法。有读者说他面试的时候这个call也要求自己实现的。那我们今天来手写call。apply的实现也是一样，只是调用形式有点区别。call的用法我们先看看Function.prototype.call()的用法。ca

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

我之前写了一篇手写 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);  // 61.
2.
3.
4.
5.

上面代码中，this 指向了 obj。

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

sum.call(obj, [2, 3]);1.

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;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

这里我们用 Symbol() 创建了一个唯一的 key，是为了防止覆盖掉 thisArg 原有的同名属性。

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

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

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

判断是否为严格模式

var strict = (function() { return !this })();1.

利用了严格模式下，如果没有指定 this（通过 bind、call、前面带对象等方式），就会得到 undefined 的机制。如果是非严格模式，this 会拿到全局变量。

fn(...args) 的 ES5 实现

ES6 的扩展运算符 ... 能够将数组 args，进行拆分按顺序放到函数中。

const args = [4, 5, 6];
fn(...args);
// 等价于
fn(4, 5, 6);1.
2.
3.
4.

那我们用 ES5，也能将数组拆分成一个参数塞到函数中吗？

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

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

const sum = new Function('a', 'b', 'return a + b');
sum(2, 6) // 81.
2.

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);
}1.
2.
3.
4.
5.
6.
7.
8.

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(', ') + ')');
}1.
2.
3.
4.
5.
6.
7.

但这种封装成一个函数的写法，会有 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;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

为了不被干扰，上面的代码实现忽略掉了一些细节。

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

另外我的实现，没有考虑严格模式。严格模式下，如果 thisArg 是 undefined 或 null，直接执行原函数就行了，不需要拼装成 obj.fn 形式。