Function.prototype.apply.call 理解分析
首先需要了解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);//
Function.prototype.apply.call 理解分析的更多相关文章
- 关于Function.prototype.apply.call的一些补充
宿主对象,在javascript中有三类对象,本地对象,内置对象和宿主对象.其他两类暂且不提,宿主对象是指什么呢(DOM BOM),控制台对象是文档对象模型的扩展,也被认为是宿主对象.那么,它们有什么 ...
- javascript中 Function.prototype.apply()与Function.prototype.call() 对比详解
Function.prototype.apply()|Function.prototype.call() apply()方法可以在使用一个指定的 this 值和一个参数数组(或类数组对象)的前提下调用 ...
- Function.prototype.apply.call
我们先从一道简单的题目开始,前几天在git上看到的: 定义log方法,它可以代理console.log的方法.log(1,2,3) => 1 2 3 通常,你的答案会是这样的: functi ...
- 探索 Reflect.apply 与 Function.prototype.apply 的区别
探索 Reflect.apply 与 Function.prototype.apply 的区别 众所周知, ES6 新增了一个全局.内建.不可构造的 Reflect 对象,并提供了其下一系列可被拦截的 ...
- Function.prototype.call 和 Function.prototype.apply 的区别
call和apply函数是function函数的基本属性,都可以用于更改函数对象和传递参数,是前端工程师常用的函数.具体使用方法请参考以下案列: 例如: 申明函数: var fn = function ...
- Function.prototype.apply()
文章地址:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply ...
- Function.prototype.call.apply结合用法
昨天在网上看到一个很有意思的js面试题,就跟同事讨论了下,发现刚开始很绕最后豁然开朗,明白过来之后发现还是挺简单的,跟大家分享下! 题目如下: var a = Function.prototype ...
- Function.prototype.call.apply作用详解
关于call()和apply()基本用法可以参阅如下两篇文章: (1).call方法参阅JavaScript call()一章节. (2).apply方法参阅JavaScript apply()一章节 ...
- 箭头函数表达式和声名式函数表达式的区别以及 Function.prototype的bind, apply,call方法
箭头函数不能用做构造函数 箭头函数没有arguments参数 箭头函数没有自己的this,是从作用域链上取this,是与箭头函数定义的位置有关的,与执行时谁调用无关,所以用call,apply,bin ...
随机推荐
- TypeScript in 5 minutes
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html Let’s get started by build ...
- Base64编码解码(js)
开源的base64.js,使用很简单,浏览器引入该JS文件,然后Base64编码这样: Base64.encode('china is so nb'); // 编码 "Y2hpbmEgaXM ...
- mysql关键字冲突
在冲突的字段加上转移符,这样子就可以了: insert into test_table (wind_code,name,`read`,creade_time) values (?,?,?,?) (注意 ...
- Xmanager PowerSuite 6企业版详细安装破解教程,解决评估过期问题(附注册机,全网独家可用),非学校/家庭免费版
title: "Xmanager PowerSuite 6企业版详细安装破解教程,解决评估过期问题(附注册机,全网独家可用),非学校/家庭免费版" categories: soft ...
- 真机调试No target device的解决(android studio)3.4.1
驱动等都正常,手机连接正常.但是还是报错 搜索到如下办法成功解决:adb未启动或启动失败,这时候选择android studio界面底端的logcat,会自动重启adb.
- 【Linux】Linux环境变量的设置和查看
Linux的变量种类 按变量的生存周期来划分,Linux变量可分为两类: 1 永久的:需要修改配置文件,变量永久生效. 2 临时的:使用export命令声明即可,变量在关闭shell时失效. 设置变量 ...
- (转)SpringBoot使用@Value给静态变量注入
Spring boot之@Value注解的使用总结 https://blog.csdn.net/hunan961/article/details/79206291
- windows zip命令
针对 Windows 用户的提示: win不自带zip,因此 Windows 用户可以从 GnuWin32 项目页面 上下载zip ,并将 C:\Program Files\GnuWin32\bin( ...
- Spring Boot整合UEditor不修改源码
1.创建Springboot项目,目录结构如下(在resources中static/ueditor/jsp/config.json) 2.pom文件引入 <dependency> < ...
- 【springboot】【idea】实体类免写get、set等方法,使用lombok依赖和插件的@Data类注解
需求,一个实体类,规范写法一定要对应的get.set方法,有必要还要重写toString方法.虽然可以快速生成get.set等方法,但是如果要添加或减少成员属性时就得重新生成get.set等方法. 而 ...