JS中的call与call.call
call 是JS 中常用的一个方法
官方解释是”调用一个对象的一个方法，以另一个对象替换当前对象”
不久前看到一个call.call 方法
心中充满疑惑，便想详细分析一下
举个栗子
function fn1() {console.log("fn1 this: "+ this);}function fn2() {console.log("fn2 this: "+ this);}fn1();fn2();// fn1 this: [object Window]// fn2 this: [object Window]复制代码这是两个正常执行的函数，他们的this 都是window
function fn1() {console.log("fn1 this: "+ this);}function fn2() {console.log("fn2 this: "+ this);}fn1.call(fn2);// fn1 this: function fn2() {console.log("fn2 this: "+ this);}复制代码这里显然执行的还是fn1 ，但是fn1 的this 变成了 fn2
虽然改变了fn1 的this 但fn1 还是正常的执行了
function fn1() {console.log("fn1 this: "+ this);}function fn2() {console.log("fn2 this: "+ this);}fn1.call.call(fn2);// fn2 this: [object Window]复制代码通过输出可以看出，显然fn1 没有执行，这次执行的fn2
this 是window
核心问题来了: 为什么两个call 放在一起后，没有执行原方法，而是执行了传入的方法
我们来慢慢理一下 fn1.call.call(fn2) 的执行过程
1:这个方法是在哪开始执行的 call(fn2)
2:执行后的结果是什么 call(fn2) 前面的this 改成了fn2 前面方法照常执行
3:call(fn2) 前面是什么，改变this 后会怎样 call(fn2) 前面是fn1.call 改变this 后 由于fn1是这次的行为主体(this)，是他执行了call 方法，所以fn1 被call(fn2) 变成了 fn2，所以接下来执行的就是 fn2.call()
4:输出 fn2 this: [object Window]
function fn1() {console.log("fn1 this: "+ this);}function fn2() {console.log("fn2 this: "+ this);}
fn1.call.call.call(fn2);复制代码1:执行过程是call(fn2)执行 前面的主体this 变成fn2
2:fn1.call.call 的主体(this)是 fn1.call (是fn1.call 执行了call 方法) 所以fn1.call变成fn2
3:接下来执行的就是 fn2.call()
总结
就是说只要一个方法中call 出现两次或者两次以上，他都会在第二步，把前面的行为主体变成你传入的参数(第一个)，然后让其执行call()
所以fn1.call.call(fn2) 其实就等于 fn1.call. … .call(fn2) 等于fn2()
JS中的call与call.call相关推荐
- 在js中使用HashMap数据结构，在js中使用K,V数据结构
首先是定义一个HashMap方法,做基类(复制在js中即可,然后引用) //简单的哈希表,begin function HashMap() {/** Map 大小 * */var size = 0;/ ...
- [JavaScript] 探索JS中的函数秘密
函数长啥样? 把一些要重复使用的内容封装到函数内. function foo(title) {console.log(title) } foo('title') foo('dust') foo('he ...
- 在node.js中，使用基于ORM架构的Sequelize，操作mysql数据库之增删改查
Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...
- 在JS中最常看到切最容易迷惑的语法(转)
发现一篇JS中比较容易迷惑的语法的解释,挺有用的,转载下,与大家分享: js中大括号有四种语义作用 语义1,组织复合语句,这是最常见的 Js代码 if( condition ) { //... }e ...
- js去el的map_转：el表达式获取map对象的内容 js中使用el表达式 js 中使用jstl 实现 session.removeattribute...
原文链接: 总结: el表达式获取map对象的内容 后端: HashMap map1 = new HashMap(); map1.put("key1","lzsb&quo ...
- js中substr,substring,indexOf,lastIndexOf的用法
js中substr,substring,indexOf,lastIndexOf等的用法 1.substr substr(start,length)表示从start位置开始,截取length长度的字符串 ...
- js中的各种宽高以及位置总结
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...
- WKWebView Safari调试、JS互调、加载进度条、JS中alert、confirm、prompt
主要内容 Safari调试 swift/OC与JS互调 增加加载进度条 支持JS中alert.confirm.prompt Safari调试 设置 -> safari --> 高级,开启J ...
- 彻底理解js中this
相关博文:http://blog.csdn.net/libin_1/article/details/49996815 彻底理解js中this的指向,不必硬背. 首先必须要说的是,this的指向在函数定 ...
- 彻底理解js中this的指向
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...
最新文章
- 物联网配云计算 两情相悦还是单相思？
- linux删掉文件怎么恢复,linux系统误删除文件怎么恢复
- 网络攻防 第三周学习总结
- 【转】［技术回顾系列]--WebService事务处理
- Android官方开发文档Training系列课程中文版：添加ActionBar之ActionBar浮层效果
- linux火狐自动更新,CentOS 7手动更新firefox | Linux系统运维联盟
- 图论 —— 图的连通性 —— 有桥连通图加边变边双连通图
- LeetCode 542. 01 矩阵
- 数据库递归查询（CET）
- 不清楚SBUS，这份SBUS协议详解请收藏
- 发现一个HTML Form提交的小问题，不知道大家是不是都注意到了
- 非常好的Oracle基础教程
- 吉木萨尔县文化旅游策划案——天山圣地，武侠之都！
- [敏捷开发培训] 燃尽图（Burndown Chart）
- 服务熔断降级什么意思？
- 9个比赛7进top10,阿里天池大数据竞赛思路分享
- python人像精细分割_基于UNet网络实现的人像分割 | 附数据集
- 概率论与数理统计 1 Overview and Descriptive Statistics(概述和描述性统计) （上篇）
- 【oracle11g,11】redo日志文件2 ：日志恢复 (重点)
- zeppelin整合hive