原生JavaScript进阶训练---重写call方法

170 篇文章 3 订阅

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。

在这里插入图片描述

之前的系列中,跟着大家重写了数组常用的一些内置方法,今天给大家重写一下call方法,这个也是面试非常非常频繁出现的考察点。

首先按照惯例我们看一下原生的call方法的使用:

   function test () {
        console.log(typeof(this));
        console.log(this);
        console.log(arguments)
    }
    test.call({
        a:1,
        b:2
    },'微信公众号','Code程序人生');

我们写了一个test方法,里面分别输出了一下this的类型,thisarguments。在方法外部,我们调用了函数的call方法,并且传入了第一个参数:一个对象,第二三个参数都是普通字符串。

我们看下控制台的输出:
在这里插入图片描述
首先this的类型是object,然后this指向的是调用call方法的时候传入的第一个参数,arguments是调用call方法的时候传入的第二和第三个参数。

这是我们大概就可以知道call方法的作用,第一个参数会改变函数的this指向,剩下的参数都是函数的参数列表。并且传入的第一个参数无论是什么类型,都会变成object类型。

我们再试一下

test.call(1,'微信公众号','Code程序人生');

在这里插入图片描述
我们传入了一个数值1,方法内的this指向了这个1,并且类型还是object

ok,我们大概知道了原生call方法的使用,下面我们重写一下。

Function.prototype.myCall = function (ctx) {
    ctx = ctx ? Object(ctx) : window;
    ctx.originFn = this;

    var args = [];

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

    eval('ctx.originFn(' + args + ')');
    delete ctx.originFn;
}

测试一下:

function test () {
    console.log(typeof(this));
    console.log(this);
    console.log(arguments);
}
test.myCall({
    a:1,
    b:2
},'微信公众号','Code程序人生')

在这里插入图片描述

没有任何的问题。

对于myCall方法的实现有任何疑问的,或者觉得代码逻辑有问题的,可以加我联系方式讨论指定。


有微信小程序课设、毕设需求联系个人QQ:505417246

关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢

关注公众号后,回复前端面试题,领取大量前端面试题汇总pdf资料
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CreatorRay

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值