5模拟实现call和apply

Posted 2021-03-02 yecy1992

1、先来看call的一个例子

 1 var value = 1;
 2 var foo = {
 3     value: 1
 4 };
 5 
 6 function bar() {
 7     console.log(this.value);
 8 }
 9 
10 bar.call(foo); // 1

猜想：假设在执行call的时候，把bar函数添加到foo对象下，执行foo.bar，具体如下：

1 var foo = {
2     value: 1,
3     bar: function() {
4         console.log(this.value);
5     }
6 };
7 
8 foo.bar(); // 1

这就是我们模拟实现的第一步；

2、实现call函数，就得了解call函数执行的过程，如下：

　　①：this 参数可以传 null 或者 undefined，此时 this 指向 window

　　②：this 参数可以传基本类型数据，原生的 call 会自动用 Object() 转换

　　③：函数是可以有返回值的

 1 Function.prototype.call2 = function (context) {
 2     context = context ? Object(context) : window; // 实现 ① 和 ②
 3     context.fn = this;
 4 
 5     var args = [];
 6     for(var i = 1, len = arguments.length; i < len; i++) {
 7         args.push(‘arguments[‘ + i + ‘]‘);
 8     }
 9 
10     var result = eval(‘context.fn(‘ + args +‘)‘);
11 
12     return result; // 实现细节 ③
13 }

3、收尾：context多了一个fn属性，在结尾用delete将其删除

 1 Function.prototype.call2 = function (context) {
 2     context = context ? Object(context) : window; 
 3     context.fn = this;
 4 
 5     var args = [];
 6     for(var i = 1, len = arguments.length; i < len; i++) {
 7         args.push(‘arguments[‘ + i + ‘]‘);
 8     }
 9 
10     var result = eval(‘context.fn(‘ + args +‘)‘);
11 
12     delete context.fn//删除多余属性fn
13     return result; 
14 }

4、apply的实现

apply和call函数的区别在于参数的形式；具体实现如下：

 1 Function.prototype.apply = function (context, arr) {
 2     context = context ? Object(context) : window; 
 3     context.fn = this;
 4 
 5     var result;
 6     // 判断是否存在第二个参数
 7     if (!arr) {
 8         result = context.fn();
 9     } else {
10         var args = [];
11         for (var i = 0, len = arr.length; i < len; i++) {
12             args.push(‘arr[‘ + i + ‘]‘);
13         }
14         result = eval(‘context.fn(‘ + args + ‘)‘);
15     }
16 
17     delete context.fn
18     return result;
19 }