如何手写一个call方法

call方法简介

关于call() 方法的介绍，可以参照这里;

call() 方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。

call() 允许为不同的对象分配和调用属于一个对象的函数/方法。

call() 提供新的this值给当前调用的函数/方法。你可以使用call来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。

语法

function.call(thisArg, arg1, arg2, ...)

参数

• thisArg

可选的。在function函数运行时使用的this值。请注意，this可能不是该方法看到的实际值：如果这个函数处于==非严格模式==下，则指定为null或undefined时会自动替换为指向全局对象，原始值会被包装。

• arg1, arg2, ...

指定的参数列表。

返回值

使用调用者提供的this值和参数调用该函数的返回值。若该方法没有返回值，则返回undefined。

实现call方法

在了解了call的基本特征之后，我们可以手动去实现以下这个方法。思路如下：

1. 所有函数都可以调用，所以应该将该方法添加到Function的原型对象上，该方法传入两个参数：

    Function.prototype.mycall = function (thisArg, ...args) {
       // ...
    }

2. 第一个参数thisArg是在function函数运行时使用的this值，如果thisArg为null或undefined时，则thisArg指向window:

    Function.prototype.mycall = function (thisArg, ...args) {
      // thisArg为null或undefined时默认指向window
      thisArg = thisArg || window;
    }

当然你也可以这样写:

    // thisArg为null或undefined时默认指向window
    Function.prototype.mycall = function (thisArg = window, ...args) {
      // ...
    }

3. 如果想把函数中的this变成我们指定的thisArg，实现方法是将该函数作为属性添加到thisArg上，然后调用它。

    // thisArg为null或undefined时默认指向window
    Function.prototype.mycall = function (thisArg = window, ...args) {
      // 将函数作为属性添加到thisArg上
      thisArg._fn = this;
    }

4. call的返回值是使用调用者提供的this值和参数调用该函数的返回值，因此我们需要返回该值：

    // thisArg为null或undefined时默认指向window
    Function.prototype.mycall = function (thisArg = window, ...args) {
      // 将函数作为属性添加到thisArg上
      thisArg._fn = this;
      // 执行thisArg._fn, 并返回返回值
      return thisArg._fn(...args);
    }

5. 最后，我们需要清除thisArg上的该属性以避免污染thisArg。需要注意的是，return必须在delete之后（否则不会执行delete），这样一来，我们需要先将返回值存储起来，然后再在delete执行完后将该值返回出去：

    // thisArg为null或undefined时默认指向window
    Function.prototype.mycall = function (thisArg = window, ...args) {
      // 将函数作为属性添加到thisArg上
      thisArg._fn = this;
      // 执行thisArg._fn, 并储存返回值
      let res = thisArg._fn(...args);
      // 删除该方法以避免对传入对象造成污染
      delete thisArg._fn;
      // 返回函数执行的返回值
      return res;
    }

这样，一个类似于call的方法就写好了，下面我们调用一下它。

使用mycall

• 情景1：普通函数

    let xiaohua = {
      name: 'xiaohua'
    }

    let xiaohuang = {
      name: 'xiaohuang',
      intr(...args) {
        console.log('hello, myname is ' + this.name);
        return Array.from(args).reduce((total, item) => total + item, 0);
      }
    }

    let res = xiaohuang.intr.mycall(xiaohua, 1, 2, 3, 4, 5);  // 'hello, myname is xiaohua'    
    console.log(res);  // 15

• 情景2： 构造函数

    
    let Animal = function(name) {
      this.name = name;
    }

    let Cat = function(name, color) {
      Animal.mycall(this, name);
      this.color = color;
    }

    let cat = new Cat('tom', 'red');

    console.log(cat);   // Cat {name: "tom", color: "red"}

这里我们实现了自己的mycall方法，它接受和call相同的参数，具备改变普通函数和构造函数那中this指向的功能。

但这其中有个小问题，如果thisArg本身就有个_fn方法，那就可能造成覆盖了。那该如何来解决这个问题呢？换言之，有没有某种操作，具有独一无二的特性，可以避免和任何属性重名？

有，那就是ES6中新添加的基础数据类型：Symbol。

使用Symbol解决冲突

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

更多关于symbol的内容，参考这里。

在上面的基础上，我们执行如下代码，发现程序报错了：

    let xiaohua = {
      name: 'xiaohua',
      // 声明了一个_fn方法
      _fn() {
        console.log('xiaohua._fn', 1);
      }
    }
    xiaohua._fn();  // xiaohua._fn, 1
    xiaohuang.intr.mycall(xiaohua, 1, 2, 3, 4, 5);  // 'hello, myname is xiaohua'  
    // 发生了属性覆盖，污染了源对象。
    xiaohua._fn();  // TypeError: xiaohua._fn is not a function

这是因为我们实现的mycall是使用_fn字面量来命名的，所以在对于原来就有_fn属性的
方法来说，会修改和删除这个属性，从而导致报错。我们也不能强迫开发者不使用_fn来作为属性名，因此，可以考虑采用symbol类型来创造一个唯一的属性值。

    Function.prototype.mycall = function (thisArg = window, ...args) {
      // 创建一个独一无二的symbol：fn
      let fn = Symbol('thisFn');
      // 将fn作为属性添加到thisArg上
      // 请注意，只能使用[]来添加和读取变量属性
      thisArg[fn] = this;
      // 执行thisArg[fn], 并储存返回值
      let res = thisArg[fn](...args);
      // 删除该方法以避免对传入对象造成污染
      delete thisArg[fn];
      // 返回函数执行的返回值
      return res;
    }

现在，我们创建了一个不会和任何属性重名的属性，我们来试试效果：

    let xiaohua = {
      name: 'xiaohua',
      fn() {
        console.log('xiaohua.fn', 1);
      }
    }

    xiaohua.fn();  // xiaohua.fn, 1
    let res = xiaohuang.intr.mycall(xiaohua, 1, 2, 3, 4, 5);  // 'hello, myname is xiaohua'    
    console.log(res);  // 15
    // symbol不和任何属性重名，不会污染源对象
    xiaohua.fn();  // xiaohua.fn, 1

大功告成。

总结

清楚方法原理，找到实现思路，发现并解决过程中遇到的问题，是学习新知识的重要步骤。实现call方法，主要有以下技术要点：

• 获取所有参数，使用展开语法（ES6），当然还有一种实现思路——arguments 对象；

• 在thisArg为null或undefined时将其指向window，这里可以使用逻辑或，也可以使用默认参数（ES6）；

• 使函数中的this指向thisArg，实现思路是将其作为属性添加到thisArg上，为了保证不污染thisArg，在调用完后需要将其删除——使用delete操作符；

• 返回函数执行后的返回值，但返回只能后于delete执行，因此，需要先将返回值存储起来；

• 使用symbol变量以避免变量重名，这里要用到计算属性名；

• 当函数为构造函数时，手动实现的call方法不会出现问题，因此不需要考虑这个因素。但bind时就需要考虑这种特殊情况了。

全部代码

全部代码如下：

<!-- mycall.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./myicon.ico">
  <title>手写call</title>
</head>

<body>
  <script>
    // Function.prototype.call方法
    // 接受 1+ 个参数
    // 第一个参数指明了调用call方法的函数中this的指向
    // 后面的参数作为调用call方法的函数的参数
    // 如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象
    // 使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。

    // thisArg为null或undefined时默认指向window
    Function.prototype.mycall = function (thisArg = window, ...args) {
      // 创建一个独一无二的symbol：fn
      let fn = Symbol('thisFn');
      // 将fn作为属性添加到thisArg上
      thisArg[fn] = this;
      // 执行thisArg[fn], 并储存返回值
      let res = thisArg[fn](...args);
      // 删除该方法以避免对传入对象造成污染
      delete thisArg[fn];
      // 返回函数执行的返回值
      return res;
    }

    // 情景1：普通函数
    let xiaohua = {
      name: 'xiaohua',
      fn() {
        console.log('xiaohua.fn', 1);
      }
    }

    let xiaohuang = {
      name: 'xiaohuang',
      intr(...args) {
        console.log('hello, myname is ' + this.name);
        return Array.from(args).reduce((total, item) => total + item, 0);
      }
    }

    xiaohua.fn();  // xiaohua.fn, 1
    let res = xiaohuang.intr.mycall(xiaohua, 1, 2, 3, 4, 5);  // 'hello, myname is xiaohua'    
    console.log(res);  // 15
    // symbol不和任何属性重名，不会污染源对象
    xiaohua.fn();  // xiaohua.fn, 1

    // 情景2： 构造函数
    let Animal = function (name) {
      this.name = name;
    }

    let Cat = function (name, color) {
      Animal.mycall(this, name);
      this.color = color;
    }

    let cat = new Cat('tom', 'red');

    console.log(cat);   // Cat.{name: "tom", color: "red"}
  </script>
</body>

</html>