JavaScript Call函数原理
call原理分析,一定要看最后的例子。
1.call使用例子
function add(c, d) {
return this.a + this.b + c + d;
} const obj = { a: , b: }; console.error(add.call(obj, , )); //
2.其实现原理类似于下面代码
const obj = {
a: ,
b: ,
add: function(c, d) {
return this.a + this.b + c + d
}
};
console.log(obj.add(3,4)); //10
其步骤伪码
// 1. 将函数设为对象的属性
obj.fn = add
// 2. 执行该函数
obj.fn()
// 3. 删除该函数
delete obj.fn
3. 实现
3.1基于ES3实现call
Function.prototype.es3Call = function (context) {
var context = context || window;
context.fn = this;
var args = [];
// arguments是类数组对象,遍历之前需要保存长度,过滤出第一个传参
for (var i = , len = arguments.length ; i < len; i++) {
// 避免object之类传入
args.push('arguments[' + i + ']');
}
var result = eval('context.fn('+args+')');
delete context.fn;
return result;
}
console.error(add.es3Call(obj, 3, 4)); // 10
3.2基于ES6实现call,es6的rest参数
Function.prototype.es6Call = function (context) {
var context = context || window;
context.fn = this;
var args = [];
for (var i = , len = arguments.length; i < len; i++) {
args.push(arguments[i]);
}
var result = context.fn(...args);
delete context.fn;
return result;
}
4.例子
测试一下自己是否真的理解了call
function fn1(){
console.log();
}
function fn2(){
console.log();
} fn1.call(fn2); //输出 1 fn1.call.call(fn2); //输出 2
分析
/**
* fn1.call(fn2)
* fn2.fn = fn1
* fn2.fn()
* delete fn2.fn
*
* fn1.call.call(fn2)
* fn2.fn=fn1.call
* fn2.fn()->fn2.call()->递归->最后执行window.fn2()
* delete fn2.fn
*/
参考博客:
https://www.cnblogs.com/donghezi/p/9742778.html (例子分析太复杂了,让人难以理解)
https://blog.csdn.net/u010377383/article/details/80646415 (原理讲的很好)
JavaScript Call函数原理的更多相关文章
- 理解JavaScript Call()函数原理。
最近在做面试题的过程中偶然碰到关于call函数的问题.然后再百度上查了查.偶然看到一篇文章:JavaScript中的call.apply.bind深入理解 抛开其对call函数基本概念的介绍还有其他原 ...
- JavaScript中函数的形参和实参的实现原理剖析
我们都知道JS里面参数的传递是可以不一样的,比如我们有一个函数: <script type="text/javascript"> function one(a,b,c) ...
- JavaScript异步编程原理
众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...
- javascript escape()函数和unescape()函数
javascript escape()函数和unescape()函数 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法: escape(string) stri ...
- JavaScript调用函数的方法
摘要:这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正 ...
- [转]javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")
javascript eval函数解析json数据时为什么 加上圆括号?为什么要 eval这里要添加 “("("+data+")");//”呢? 原因在于: ...
- JavaScript的闭包原理
什么是js(JavaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 个人的理解是 ...
- javascript引擎工作原理
1. 什么是JavaScript解析引擎? 简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序.比方说,当你写了 var a = 1 + ...
- Js(javaScript)的闭包原理
问题?什么是js(javaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 小编 ...
随机推荐
- 写给Web开发人员看的Nginx介绍
译者注:不知道其他开发者是否和我一样,参与或者写了很多Web项目,但是却没有真正的去完整的部署应用,很多时候都是交给ops即运维的同学帮忙来做.而作为一个有节操的开发者,我认为了解一些服务器方面的知识 ...
- linux gcc安装
2004年4月20日最新版本的GCC编译器3.4.0发布了.目前,GCC可以用来编译C/C++.FORTRAN.java.OBJC.ADA等语言的程序,可根据需要选择安装支持的语言.GCC 3.4.0 ...
- [书籍翻译] 《JavaScript并发编程》第七章 抽取并发逻辑
本文是我翻译<JavaScript Concurrency>书籍的第七章 抽取并发逻辑,该书主要以Promises.Generator.Web workers等技术来讲解JavaScrip ...
- Reeds-Shepp曲线和Dubins曲线
转载:https://www.cnblogs.com/huyanan/articles/6243694.html 什么是Reeds-Shepp曲线? 想象你下班开车回家,到了小区后想把车停 ...
- 为什么加了jquery mobile 会有 Loading 字样在页面底部?【已解决】
这是一个奇怪的问题,用了jquery mobile js库,页面底部就会出现Loading字样, 解决办法如下: 1,正常加上css样式 2,一定要在jquery mobile js库加载之前,设置 ...
- vmware 虚拟机扩展 liunx系统硬盘空间
参考一下以下博客 https://www.cnblogs.com/yongdaimi/p/9050155.html https://blog.csdn.net/daemon_2017/article/ ...
- 配置由Spring处理json乱码
<mvc:annotation-driven> <mvc:message-converters register-defaults="true"> < ...
- HRNet网络结构
最近正在阅读CVPR2019的论文Deep High-Resolution Representation Learning for Human Pose Estimation. 无奈看论文中的Netw ...
- Procomm Plus 与ASPECT脚本语言在基于远程终端设备上的测试应用
产测 ---------------------------------------------------- 原文:http://www.bixuanzl.com/20180801/1084478. ...
- TCP/IP分层图解
网络协议通常分不同层次进行开发,每一层分别负责不同的通信功能.一个协议族,比如 T C P / I P,是一组不同层次上的多个协议的组合. T C P / I P通常被认为是一个四层协议系统,如图1 ...