JavaScript之call和apply方法的实现里面的eval函数和push方法的理解

背景:

之前今日头条的面试题,有一道题是自己实现一个bind方法,然后由于考虑的情况不够完全,结果崩了,然后搜索资料,看到一篇bind方法的实现讲得挺好的,但是需要知道call和apply的方法是如何实现的,因为里面用到了apply方法,而博主也写了call和apply方法是如何实现的博客,我觉得非常棒,但是有些地方看得不是很懂,然后花费了挺长的时间去理解和试验,弄明白了几点,下面附上参考资料(这个博主也是转载别人的=…..=):
https://blog.csdn.net/daimomo000/article/details/72897008

这里大致总结一下:
首先我们要知道call方法做了什么,它做了两点:

var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

// 返回了一个函数
var bindFoo = bar.bind(foo); 

bindFoo(); // 1
  1. call 改变了 this 的指向,指向到 foo
  2. bar 函数执行了

我们知道它做了两点,那么就可以设计思路了,至于怎么一步步实现这个方法,上面的链接,这里不多说,那么直接附上完整代码:

Function.prototype.call2 = function (context) {
    var context = context || window;
    context.fn = this;

    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }

    var result = eval('context.fn(' + args +')');

    delete context.fn
    return result;
}

// 测试一下
var value = 2;

var obj = {
    value: 1
}

function bar(name, age) {
    console.log(this.value);
    return {
        value: this.value,
        name: name,
        age: age
    }
}

bar.call(null); // 2

console.log(bar.call2(obj, 'kevin', 18));
// 1
// Object {
//    value: 1,
//    name: 'kevin',
//    age: 18
// }

大概的思路就是首先利用函数的原型Function.prototype.call2 = function(context){这里面的this指向调用该call2方法的函数} 为所有函数增添一个call2方法,然后利用call方法传进去的第一个参数(对象),在对象里面增添一个属性,该属性是一个方法,那么,这个方法(添加到对象里面的方法)的this就指向这个对象,然后就是执行该方法(添加到对象的方法),并把call方法的其他参数传进去执行。
这里就有一个问题
上面的参数存放到数组里面,那么怎么把数组变成参数添加到函数里面并执行呢?无疑,ES6的扩展运算符可以做到,但是封装一个call方法用到es6的方法就不太好了,这里的关键就是一个用到eval函数,它能调用js解析器把参数当做js表达式执行。
看到上面的代码,首先我觉得奇怪的是args.push('arguments[' + i + ']');
(为了能够更好的理解下面的内容,可以先跳到后面看eval函数里面的那个数组发生了什么事情)这段代码为什么要用引号引起来,也就是push一个字符转到数组里面,执行了这段代码args里面是['arguments[1]','arguments[2]'],那让我们看看不用引号,直接执行args.push(arguments[i]) 会发生什么,把上面的代码的这个args.push('arguments[' + i + ']'); 换成args.push(arguments[i])
它会发生什么? 没错它报错了,报了下面的错误
这里写图片描述
kevin这个东西没有定义?为什么,因为现在args是这样的值[‘kevin’,18],它在执行eval函数的时候报错了,也就是var result = eval('context.fn(' + args +')'); 这里报错,为什么会报错,eval是什么东东,下面我们来测试一下
这里写图片描述
这就是报错的原因,当执行到var result = eval('context.fn(' + args +')'); 这段代码的时候,eval调用js解释器,将里面的执行,这时候args是[‘kevin’,18],这两个东西上文根本就没定义,不是变量,由上图知道,只有有声明定义的变量eval函数才不会报错,这就是它报错的原因,而若是用这个`args.push('arguments[' + i + ']'); ,那么args就是['argsments[1]','arguments[2]'],而argsments[1]和argusment[2]是声明定义的,argsments[1] = 'kevin', arguments[2] = 18,也就是eval('arguments[1]')不会报错而eval('kevin')会报错,和上图报错是一样的。

现在再来看看var result = eval('context.fn(' + args +')'); 这个函数为什么可以把数组变成参数和函数结合起来,我看之前的文章的时候就漏看了一点,当执行到这里的时候,args会自动调用toString()方法,也就是变成了"arguments[1],arguments[2]" ,这样数组就变成参数串然后和前面的函数拼接起来执行。这就能执行函数了,为了验证eval()函数的参数是数组,是不是调用了toString()方法,我进行了试验,发现貌似只有是在执行函数当做函数参数的时候才调用toString()方法,看下图
这里写图片描述

然后apply方法的实现和call方法差不多,只是apply方法的后面的参数是一个数组

Function.prototype.apply = function (context, arr) {
    var context = Object(context) || window;
    context.fn = this;

    var result;
    if (!arr) {
        result = context.fn();
    }
    else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('context.fn(' + args + ')')
    }

    delete context.fn
    return result;
}

以上纯属个人见解和理解,有什么不同意见欢迎大家评论,共同学习学习

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值