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函数原理的更多相关文章

  1. 理解JavaScript Call()函数原理。

    最近在做面试题的过程中偶然碰到关于call函数的问题.然后再百度上查了查.偶然看到一篇文章:JavaScript中的call.apply.bind深入理解 抛开其对call函数基本概念的介绍还有其他原 ...

  2. JavaScript中函数的形参和实参的实现原理剖析

    我们都知道JS里面参数的传递是可以不一样的,比如我们有一个函数: <script type="text/javascript"> function one(a,b,c) ...

  3. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  4. javascript escape()函数和unescape()函数

    javascript escape()函数和unescape()函数 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法: escape(string) stri ...

  5. JavaScript调用函数的方法

    摘要:这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正 ...

  6. [转]javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")

    javascript eval函数解析json数据时为什么 加上圆括号?为什么要 eval这里要添加 “("("+data+")");//”呢?   原因在于: ...

  7. JavaScript的闭包原理

    什么是js(JavaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 个人的理解是 ...

  8. javascript引擎工作原理

    1. 什么是JavaScript解析引擎? 简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序.比方说,当你写了 var a = 1 + ...

  9. Js(javaScript)的闭包原理

    问题?什么是js(javaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.  小编 ...

随机推荐

  1. 写给Web开发人员看的Nginx介绍

    译者注:不知道其他开发者是否和我一样,参与或者写了很多Web项目,但是却没有真正的去完整的部署应用,很多时候都是交给ops即运维的同学帮忙来做.而作为一个有节操的开发者,我认为了解一些服务器方面的知识 ...

  2. linux gcc安装

    2004年4月20日最新版本的GCC编译器3.4.0发布了.目前,GCC可以用来编译C/C++.FORTRAN.java.OBJC.ADA等语言的程序,可根据需要选择安装支持的语言.GCC 3.4.0 ...

  3. [书籍翻译] 《JavaScript并发编程》第七章 抽取并发逻辑

    本文是我翻译<JavaScript Concurrency>书籍的第七章 抽取并发逻辑,该书主要以Promises.Generator.Web workers等技术来讲解JavaScrip ...

  4. Reeds-Shepp曲线和Dubins曲线

    转载:https://www.cnblogs.com/huyanan/articles/6243694.html 什么是Reeds-Shepp曲线?       想象你下班开车回家,到了小区后想把车停 ...

  5. 为什么加了jquery mobile 会有 Loading 字样在页面底部?【已解决】

    这是一个奇怪的问题,用了jquery mobile js库,页面底部就会出现Loading字样, 解决办法如下: 1,正常加上css样式 2,一定要在jquery mobile js库加载之前,设置 ...

  6. vmware 虚拟机扩展 liunx系统硬盘空间

    参考一下以下博客 https://www.cnblogs.com/yongdaimi/p/9050155.html https://blog.csdn.net/daemon_2017/article/ ...

  7. 配置由Spring处理json乱码

    <mvc:annotation-driven> <mvc:message-converters register-defaults="true"> < ...

  8. HRNet网络结构

    最近正在阅读CVPR2019的论文Deep High-Resolution Representation Learning for Human Pose Estimation. 无奈看论文中的Netw ...

  9. Procomm Plus 与ASPECT脚本语言在基于远程终端设备上的测试应用

    产测 ---------------------------------------------------- 原文:http://www.bixuanzl.com/20180801/1084478. ...

  10. TCP/IP分层图解

    网络协议通常分不同层次进行开发,每一层分别负责不同的通信功能.一个协议族,比如 T C P / I P,是一组不同层次上的多个协议的组合. T C P / I P通常被认为是一个四层协议系统,如图1 ...