手写call, apply, bind(简易版)

每天做个总结吧，坚持就是胜利！

    /**
        @date 2021-05-31
        @description 手写call, apply, bind(简易版)
    */
复制代码

壹（序）

今天被问到如何实现call，明明是很简单的一道手写题，但是当时脑子全是浆糊，回家很快就实现了一个简单的版本，但不管怎么说，还是掌握得不够牢固，所以今天手写实现一下call, apply, bind。

贰（区别）

call, apply, bind，三个函数都是Function原型上的函数，用来强制改变当前函数this的指向；三者的第一参数都是当前函数运行时使用的this，也就是强绑定的this，可选，为null或undefined时指向全局对象；
三者主要区别有以下两点：

1. call, apply会立即调用函数，并返回调用的值，bind会返回一个新函数；
2. 三者第一个参数后面的参数是当前函数需要的参数， call, bind是依次传入，而apply则是传入一个参数数组；

叁（实现）

测试代码：

const obj = {
    a: 1,
}

function test() {
  return this.a;
}

globalThis.a = 2;
复制代码

call：

Function.prototype.myCall = function (thisArg = globalThis, ...args) {
  const fn = Symbol('fn');

  thisArg[fn] = this;

  const res = thisArg[fn](...args);

  delete thisArg[fn];

  return res;
};

console.log(test.myCall(obj)); // 1
console.log(test.myCall()); // 2
复制代码

apply:

Function.prototype.myApply = function (thisArg = globalThis, args = []) {
  const fn = Symbol('fn');

  thisArg[fn] = this;

  const res = thisArg[fn](...args);

  delete thisArg[fn];

  return res;
};

console.log(test.myApply(obj)); // 1
console.log(test.myApply()); // 2
复制代码

bind:

Function.prototype.myBind = function (thisArg = globalThis, ...args) {
  const self = this;

  return function () {
    return self.myApply(thisArg, [...args, ...arguments]);
  };
};

console.log(test.myApply(obj)()); // 1
console.log(test.myApply()()); // 2
复制代码

肆（引申）

还被问到了Iterator和Generator相关，但阮一峰老师的《EAMCScript6入门》像白看一样，下来需要好好重温一下，学到脑子里的才是自己的！