码迷,mamicode.com
首页 > 移动开发 > 详细

5、模拟实现call和apply

时间:2020-04-01 16:32:07      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:delete   bsp   foo   pre   添加   style   第一步   val   app   

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 }

 

5、模拟实现call和apply

标签:delete   bsp   foo   pre   添加   style   第一步   val   app   

原文地址:https://www.cnblogs.com/yecy1992/p/12613292.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!