zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

JavaScript训练方法重写 --- 进阶 原生 call
2023-09-11 14:18:53 时间

码字不易,有帮助的同学希望能关注一下我的微信公众号: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资料
在这里插入图片描述