宿主对象,在javascript中有三类对象,本地对象,内置对象和宿主对象。其他两类暂且不提,宿主对象是指什么呢(DOM BOM),控制台对象是文档对象模型的扩展,也被认为是宿主对象。那么,它们有什么缺陷呢?在IE9之前,宿主对象不是继承自Object,它们的方法也不继承自Function,IE9之后就大有改进了。

看下IE8与IE9的document.getElementById

ie8:

ie9:

我们可以看到,ie9的document.getElementById是有Function.prototype上的方法的,所以说,IE9+的宿主对象它们继承了Object,方法继承了Function。

IE8不支持call,所以问题就来了,我们经常会有这样的需求,比如,重新控制台。

很多人想到了console.log.call,但是它不完美,现在你们知道了~~

好,想想解决办法吧:

1、使用Function.prototype.bind,但是...你得为不支持bind的浏览器做兼容

Function.prototype.bind.call(console.log,console).apply(console,arguments)
//摘自MDN
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
} var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis
? this
: oThis || window,
aArgs.concat(Array.prototype.slice.call(arguments)));
}; fNOP.prototype = this.prototype;
fBound.prototype = new fNOP(); return fBound;
};
}

2、new Function+replace (new Function不是说尽量不要用么,还是算了吧!!)

function log(){

    var fn = 'console.log(args)',

    args=[].slice.call(arguments);

    fn = new Function('args',fn.replace(/args/,args.join(',')));

    fn(arguments);

};

3、终极方法

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的一些补充的更多相关文章

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

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

  2. Function.prototype.apply.call

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

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

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

  4. Function.prototype.apply.call 理解分析

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

  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作用详解

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

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

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

  9. Function.prototype.call.apply()方法

    在看uncurrying化函数时候,碰到了Function.prototype.call.apply()的用法: 先说说uncurrying()函数: Function.prototype.uncur ...

随机推荐

  1. 洛谷【P1080】国王游戏

    我对贪心的理解:https://www.cnblogs.com/AKMer/p/9776293.html 题目传送门:https://www.luogu.org/problemnew/show/P10 ...

  2. 不同类型input尺寸设置区别

    最近发现为不用类型的input设置相同的尺寸,却得到了不一样的尺寸结果.发现不同类型的input的height和width竟然含义不同.在此小整理一下. (1)button类型 规律 button类型 ...

  3. Asp.net工作流workflow实战之书签(二)

    1.winform(web程序)下使用工作流 怎样才能像控制台那样让winform或web页面窗体阻塞等待工作流的继续执行呢 2.BookMark书签 书签:和一般的书签看书的时候方便查看上次看的内容 ...

  4. 问题6:如何让字典保持有序(使用collections的OrderedDict方法)

    from collections imort OrderedDict d = OrderedDict() d['aa'] = (1, 30) d['bb'] = (2, 31) d['cc'] = ( ...

  5. tomcat solr 限制ip

    <Context path="/solr" reloadable="false" docBase="/var/www"> < ...

  6. maven仓库的管理_Nexus

    maven仓库管理的软件有很多,这里介绍的是Sonatype的nexus 一.下载 下载地址:https://yunpan.cn/cv2JhzwQuvb7B  访问密码 932d 二.安装 2.1.将 ...

  7. Windchill 预览效果偏向左边

    文档预览效果偏左 解决方法: 1.修改worker配置,去掉“fit worksheet to a single page”的勾 2.进行services,重新启动以下服务 3.重启windchill ...

  8. R: 数据结构、数据类型的描述。

    ################################################### 问题:数据结构..类型  18.4.27 有哪些数据结构.类型??  各自有什么特点? 解决方案 ...

  9. Python 中的赋值、拷贝、引用

    在 python 中赋值语句总是建立对象的引用值,而不是复制对象.因此,python 变量更像是指针,而不是数据存储区域. 如图所示,当改变一个变量的值,另一个的值也会跟着改变.也就是浅拷贝. 若要实 ...

  10. vue入门(二)----模板与计算属性

    其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...