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

news/2024/7/19 14:50:33 标签: js, 前端

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


http://www.niftyadmin.cn/n/1576488.html

相关文章

串口的AT命令

1.设置 DCD 功能模式 DCD 线路只在数据载波存在时打开(当建立GRPRS连接时&#xff0c;DCD输出低电平) AT&C1 2.设置 DTR 功能模式 DTR 由 ON 至 OFF&#xff08;电平从低到高&#xff09;&#xff1a; TA 在保持当前数据通话的同时&#xff0c;切换至命令模式。 AT&D1 …

聊聊什么是CommonJs和Es Module及它们的区别

码字不易&#xff0c;有帮助的同学希望能关注一下我的微信公众号&#xff1a;Code程序人生&#xff0c;感谢&#xff01;代码自用自取。 前言 初衷&#xff1a;将我整理的笔记分享给大家&#xff0c;希望本篇文章能给你带来不一样的认知&#xff0c;不喜勿喷。 适合人群&#…

解决confluence的乱码问题

使用confluence时发现一些含有中文的页面中&#xff0c;中文都变成了问号。 继续搜索解决方案&#xff0c;发现时数据库中数据的格式不对&#xff0c;在mysql中输入以下命令&#xff1a;mysql> show variables like char%;------------------------------------------| Vari…

前端面试题及答案---CSS篇

码字不易&#xff0c;有帮助的同学希望能关注一下我的微信公众号&#xff1a;Code程序人生&#xff0c;感谢&#xff01;代码自用自取。 CSS伪类与伪元素区别 伪类(pseudo-classes) 其核心就是用来选择DOM树之外的信息&#xff0c;不能够被普通选择器选择的文档之外的元素&…

HDFS用户指南(翻译)

HDFS用户指南原文地址&#xff1a;http://hadoop.apache.org/core/docs/current/hdfs_user_guide.html译者&#xff1a;dennis zhuang(killme2008gmail.com),有错误请指正&#xff0c;多谢。目的 本文档可以作为使用Hadoop分布式文件系统用户的起点&#xff0c;无论是将HDFS应用…

前端面试刷题day1

码字不易&#xff0c;有帮助的同学希望能关注一下我的微信公众号&#xff1a;Code程序人生&#xff0c;感谢&#xff01;代码自用自取。 从今天开始&#xff0c;整一个系列&#xff0c;每天都提供一道关于前端面试中常见的题目。并且我建立了一个QQ群&#xff08;425554900&…

Codeforces D. Array Division

题目链接&#xff1a;http://codeforces.com/contest/808/problem/D 题意&#xff1a; 这一题给你一个数组&#xff0c;你可以调换某一个数的位置&#xff0c;使得这个数组可以分成2半&#xff0c;前半段的和等于后半段&#xff08;严格的前半段和后半段&#xff09;。问你能不…

前端面试刷题day2(每日更新前端面试高频考察点)

码字不易&#xff0c;有帮助的同学希望能关注一下我的微信公众号&#xff1a;Code程序人生&#xff0c;感谢&#xff01;代码自用自取。 每天都提供一道关于前端面试中常见的题目。并且我建立了一个QQ群&#xff08;425554900&#xff09;&#xff0c;QQ群内提供大量面试题目和…