原生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
的类型,this
,arguments
。在方法外部,我们调用了函数的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资料
相关文章
- 【JavaScript 6连载】五、继承的概念
- JavaScript中的函数基础
- [Javascript] Understanding the difference between .prototype and .__proto__ in JavaScript
- [Javascript] Compose multiple functions for new behavior in JavaScript
- [Javascript] Proper use of console.assert in JavaScript
- [Javascript] How to write a Javascript libarary
- JavaScript RegExp Object 正则表达式入门
- [Javascript] Singleton Pattern
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain (Object.setPrototypeOf())
- [Javascript] Broadcaster + Operator + Listener pattern -- 18. Create a Win Condition with a mapDone Operator
- [Javascript] Hide Properties from Showing Up in "for ... in" Loops in JavaScript
- [Javascript] Multiply Two Arrays over a Function in JavaScript
- [Javascript] Await a JavaScript Promise in an async Function with the await Operator
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] Delegate JavaScript (ES6) generator iteration control
- [GraphQL] Write a GraphQL Schema in JavaScript
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript] Hoisting in JavaScript
- 快速排序(Quicksort)的Javascript实现
- Javascript异步编程的4种方法
- atitit.javascript调用java in swt attilax 总结
- 如何使用Javascript复制到剪贴板
- JavaScript基础&实战(1)js的基本语法、标识符、数据类型
- JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符
- web前端框架Javascript开发基础之JavaScript作用域