一、实现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;
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

• 使用：

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: ƒ}
3 150 100
250
*/

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

二、实现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;
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

• 使用：

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: ƒ}
3 2 4
6
*/

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

三、实现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);
  }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

• 使用：

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"}
3 6 7
13
*/

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

文章来源: blog.csdn.net，作者：爱玲姐姐，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/jal517486222/article/details/104842902