手写代码实现call/apply/bind

1. 手写call

Function.prototype.myCall = function (context) {
  if(context == null){
    context = window;
  }
  context.fn = this;
  const arg = [...arguments].slice(1);
  const ret = context.fn(...arg);
  delete context.fn;
  return ret;
}

function fn1(a, b) {
  console.log('this : ', this);
  console.log(a, b);
  return a + b;
}
const result = fn1.myCall({name: 'jal'}, 150, 100);
console.log(result);
this :  {name: "jal", fn: ƒ}
150 100
250

2. 手写apply

Function.prototype.myApply = function (context, arr) {
  if(context == null) {
    context = window;
  }
  context.fn = this;
  let ret;
  if(arr == null){
    ret = context.fn();
  }else {
    ret = context.fn(...arr);
  }
  delete context.fn;
  return ret;
}

function fn1(a, b) {
  console.log('this : ', this);
  console.log(a, b);
  return a + b;
}
const result = fn1.myApply({name: 'cathy'}, [2, 4]);
console.log(result);

this :  {name: "cathy", fn: ƒ}
2 4
6

3. 手写bind

Function.prototype.myBind = function (context) {
  if(context == null){
    context = window;
  }
  const arg = [...arguments].slice(1);
  const _this = this;
  
  return function F () {
    if(this instanceof F) {
      return _this.call(this, ...arg);
    }
    return _this.call(context, ...arg);
  }
}

function fn1(a, b) {
  console.log('this : ', this);
  console.log(a, b);
  return a + b;
}
const fn2 = fn1.myBind({name: 'yibo'}, 6, 7);
const result = fn2();
console.log(result);

this :  {name: "yibo"}
6 7
13