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

宿主对象,在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)//2
Function.prototype.call.call(f1,f2);//1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小白的技术客栈

Python内置数据结构之字典

今天给大家讲解Python内置数据结构:字典。字典的内容比较多,今天只是简单地介绍一下,明天会继续补充字典相关的内容。 关于Windows的环境安装及配置,小白...

3124
来自专栏企鹅号快讯

看完这篇文章就能当Python工程师

有句话说得好,不想做程序员的司机不是好厨师!用十分钟看完小编整理的这篇文章,分分钟钟教你做司机...不是,是厨师...哦也不是,是程序猿! 在这里我还是要介绍一...

2065
来自专栏曾大稳的博客

c基础

881
来自专栏程序员八阿哥

Python从入门到摔门(5):18式优雅你的Python

在cmd中输入jupyter notebook --generate-config,然后找到生成的配置文件jupyter_notebook_config.py,...

902
来自专栏PHP在线

给PHP开发者讲讲PHP源码-第二部分

欢迎来到"给PHP开发者的PHP源码"系列的第二部分。 在上一篇中,ircmaxell说明了你可以在哪里找到PHP的源码,它的基本目录结构以及简单地介绍了一些C...

3958
来自专栏Golang语言社区

转--Golang语言-- Web 编程

1.golang的安装工具 1.1 GVM 第三方开发的Go多版本管理工具 2.golang环境变量 2.1 GOROOT=D:\go (golang 安装目录...

3576
来自专栏Golang语言社区

转--Golang语言-- Web 编程

1.golang的安装工具 1.1 GVM 第三方开发的Go多版本管理工具 2.golang环境变量 2.1 GOROOT=D:\go (golang 安装目录...

3718
来自专栏Laoqi's Linux运维专列

While 循环语句

4859
来自专栏nummy

ECMAScript 6 特性ECMAScript 6 特性

ECMAScript 6,也被称做ECMAScript 2015,是ECMAScript标准的下一个版本。这个标准预计将于2015年6月被正式批准。ES6是这门...

821
来自专栏jmeter高手高高手

Jmeter(五)_函数

1、它有两个参数,第一个参数是要执行的语句,可以是beanshell语句或者是文件地址,是必选参数;第二个参数是保存结果的变量名称,非必选参数。

1552

扫码关注云+社区