首先需要了解apply,call的基本用法,其目的是改变调用方法中的this指向,将其指向为传入的对象,改变this的指向,两种方法接收参数的方式不同。

代码:console.log

var console = window.console || {log: function () {}};
var log = console.log;
console.log = function(tips,message){
Function.prototype.apply.call(log, console, arguments);
//Function.prototype.call.call(log, console, arguments);
//Function.prototype.call.apply(log, [console, arguments]); //传统方式
//var args=[].slice.call(arguments);
//log.apply(console,args);
}

执行结果:

console.log("测试","This is test");  
测试 This is test  

分析:

该怎么理解Function.prototype.apply.call(log,console,arguments);呢

首先可以将Function.prototype.apply看成一个整体-->FunctionApply

FunctionApply.call(log,console,arguments);

那么将此句翻译一下

log.FunctionApply(console,arguments);

然后再翻译一下,你就懂了吧,就是一个普通方法调用了

console.log(arguments);

发散思维:

Function.prototype.call.apply(log,[console.arguments]);

FunctionCall.apply(log,[console,arguments]);
log.FunctionCall(console,arguments);
console.log(arguments);

小tips:

 Function.prototype.apply.call  等同于Function.prototype.call.call
Function.prototype.call.apply 等同于 Function.prototype.apply.apply

免费外送个栗子:

function testA(a){
console.log('aaaa',a);
}
Function.prototype.apply.call(testA,window,['Mike']);
//Function.prototype.call.call(testA,window,['Mike']);
//testA.apply(window,['Mike']);
//window.testA('Mike');
//Function.prototype.apply.apply(testA,[window,['Mike']]);
//Function.prototype.call.apply(testA,[window,['Mike']]);

以上执行结果都一样

为:aaaa Mike

总结使用用法:

XXX可以是call或者是apply,child一定是parent可指向的对象

Function.prototype.XXX.call(child,parent,arguments||array);

Function.prototype.XXX.apply(child,[parent,arguments||array]);

--------------------------------------------------------------------------------------------------------------------------------------------------------------

终极方法

Function.prototype.apply.call(console.log,console,arguments);

这么一对比,第三种方案妥妥的胜出啊,不用考虑兼容,代码简短,虽然不是很好理解~~

说了这么多废话,Function.prototype.apply.call什么时候用,就是在这种应用场景。

如果还有其他的话,那就是那些奇葩面试题,比如:

var f1=function(){console.log(1)};
var f2=function(){console.log(2)};
Function.prototype.call.call(Function.prototype.call,f2)//
Function.prototype.call.call(f1,f2);//
昨天在网上看到一个很有意思的js面试题,就跟同事讨论了下,发现刚开始很绕最后豁然开朗,明白过来之后发现还是挺简单的,跟大家分享下!
题目如下:var a = Function.prototype.call.apply( function(a){return a;},  [0,4,3] );        alert(a);
分析步骤如下:
1、将Function.prototype.call当成整体,call方法是由浏览器实现的本地方法,是函数类型的内部方法
var a = (Function.prototype.call).apply(function(a){return a;}, [0,4,3]);
 
2、fun.apply(obj,args)等价于obj.fun(args),这一步是重点,必须理解!
(function(a){return a;}).apply(0,[4,3])
(function(a){return a;}).call(0,4,3)
 
3、 到这步结果就很明显了,a就是4,alert的结果就是4
 
这个题目迷惑的点就在于Function.prototype.call,理解好了,就清晰明了了!

Function.prototype.apply.call 理解分析的更多相关文章

  1. 关于Function.prototype.apply.call的一些补充

    宿主对象,在javascript中有三类对象,本地对象,内置对象和宿主对象.其他两类暂且不提,宿主对象是指什么呢(DOM BOM),控制台对象是文档对象模型的扩展,也被认为是宿主对象.那么,它们有什么 ...

  2. javascript中 Function.prototype.apply()与Function.prototype.call() 对比详解

    Function.prototype.apply()|Function.prototype.call() apply()方法可以在使用一个指定的 this 值和一个参数数组(或类数组对象)的前提下调用 ...

  3. Function.prototype.apply.call

    我们先从一道简单的题目开始,前几天在git上看到的: 定义log方法,它可以代理console.log的方法.log(1,2,3)  =>  1 2 3 通常,你的答案会是这样的: functi ...

  4. 探索 Reflect.apply 与 Function.prototype.apply 的区别

    探索 Reflect.apply 与 Function.prototype.apply 的区别 众所周知, ES6 新增了一个全局.内建.不可构造的 Reflect 对象,并提供了其下一系列可被拦截的 ...

  5. Function.prototype.call 和 Function.prototype.apply 的区别

    call和apply函数是function函数的基本属性,都可以用于更改函数对象和传递参数,是前端工程师常用的函数.具体使用方法请参考以下案列: 例如: 申明函数: var fn = function ...

  6. Function.prototype.apply()

    文章地址:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply ...

  7. Function.prototype.call.apply结合用法

     昨天在网上看到一个很有意思的js面试题,就跟同事讨论了下,发现刚开始很绕最后豁然开朗,明白过来之后发现还是挺简单的,跟大家分享下!  题目如下: var a = Function.prototype ...

  8. Function.prototype.call.apply作用详解

    关于call()和apply()基本用法可以参阅如下两篇文章: (1).call方法参阅JavaScript call()一章节. (2).apply方法参阅JavaScript apply()一章节 ...

  9. 箭头函数表达式和声名式函数表达式的区别以及 Function.prototype的bind, apply,call方法

    箭头函数不能用做构造函数 箭头函数没有arguments参数 箭头函数没有自己的this,是从作用域链上取this,是与箭头函数定义的位置有关的,与执行时谁调用无关,所以用call,apply,bin ...

随机推荐

  1. SVN 从主干合并到分支库

    主干库:平时开发用的库, 分支库:中途需要进行上生产环境的库 分支库的版本从主干库拉过去就行 红色的为分支库. 创建的速度很快. 1.创建好后,在主干库添加一个文件. 2.然后分支库进行合并,这里用e ...

  2. IDEA强制清除Maven缓存

    目录 重新导入依赖的常见方式 存在的问题 彻底清除IDEA缓存的方式 重新导入依赖的常见方式 下面图中的刷新按钮,在我的机器上,并不能每次都正确导入pom.xml中写的依赖项,而是导入之前pom.xm ...

  3. [错误解决] Libreoffice转换不成功,直接不做任何操作

    问题描述: Libreoffice在版本5.3.0之前都存在这个问题.现象是:当你运行其中一个LibreOffice的时候,再运行另外一个Libreoffice转换时,将不做任何操作. 解决方案: 如 ...

  4. intellij查找接口的实现类

    拿MyBatis的SqlSession为例 第一步:先找到这个接口 第二步:右击选择 再选择 第三步: 会得到如下 右击Closeable,因为SqlSession实现了它,选择Show Inplem ...

  5. 深入nginx之《获取用户的真实IP》

    获取用户的真实IP Nginx会将客户端的IP信息存放在$remote_addr变量里,但这并不意味着它就是客户端的IP,生产环境往往会充满各种代理,让IP的来龙去脉变得扑朔迷离. 目前互联网公司基本 ...

  6. BlackBerry Key2 键盘扩展

    概述 BlackBerry Key2 键盘扩展是为BlackBerry Key2输入物理键盘上缺少的键而制作的输入法. BlackBerry Key2键盘和内置输入法是为商业环境而设计的,缺少桌面计算 ...

  7. jq同一页面内容切换

    $(function() { //选择标题显示 初始显示内容及样式 $('.right-content .right-item').eq(0).addClass('showcontent') $('. ...

  8. identity server4

    dotnet new -i identityserver4.templates   添加模板

  9. C++ 定义一个指针类型

    #include <iostream>using namespace std; int main(){ int a= 10;  //定义变量a int * p ; //定义个指针P p = ...

  10. Linux基础(10)AIO项目设计与POSIX文件操作和目录管理

    实现fast-cp :拷贝文件到目标对象 Linux的七种文件类型 :https://blog.csdn.net/linkvivi/article/details/79834143 ls -al :h ...