javascript中call,apply,bind的用法对比分析_基础知识

关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点。下边我就来好好总结一下它们三者各自的用法,及常见的应用场景。

首先看call这个函数,可以理解成"借用“,"请求"。想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了,总之你的手机就是用不成。可是你非打这个电话不可,于是你可以去借一下朋友的手机,或者借用一下邻居的手机,或者公用电话,这样呢,你就可以在自己没有手机可用的情况下,完成打电话这个事情,而至于你是用谁的电话打的,就不重要了,反正和用你自己的手机打的电话是一样的效果。call这个函数的初衷也和这个类似,下面我用代码来模拟一下它的应用情景:

复制代码 代码如下:

    var frog = {
        name : 'frog',
        say  : function(){
            alert(this.name);
        }
    }
    var rabbit = {
        name : 'rabbit'
    }
    frog.say.call(rubbit) // rabbit

rubbit这个对象是个哑吧,但是他想要说出自己的名字,光凭它自己的能力,是不可能实现的,好在呢,它有一个叫frog的好基友,它可以说话。于是呢,rubbit就请求frog替它实现这个心愿。frog.say.call()的第一个参数,一定是要填写发出请求的人,律师喜欢称为委托人。这里是rubbit请求frog替它say名字,所以填写rubbit。这样一来,在say的时候,就会查找rubbit的name,而不是frog的name了。如果这里填写frog会是什么样子呢?这就好比是自己请求自己做某事,喂自己代盐也是可以的。可以试一下:

复制代码 代码如下:

  var frog = {
        name : 'frog',
        say  : function(){
            alert(this.name);
        }
    }
    var rabbit = {
        name : 'rabbit'
    }
    frog.say.call(frog) // frog

自己喂自己袋盐,肯定是说自己的名字啦,这完全没有什么意外的。下面我们来看看call的经典用法:

复制代码 代码如下:

//把参数转化成真正的数组对象
function frog(){
    var arr = [].slice.call(arguments);
    console.log(arguments.slice,arr.slice)
        //  undefined function slice() { [native code] }
}
    frog(1,2,3,4)

能过这么一call,我们就可以把arguments对象当成数组对象来使用了。关于call的用法很多,翻开jquery的源码,很容易就能找到很多运用的地方。在此不一一列举了,还是回到我们前面的情景,借电话这种事太简单了,打完电话,肯定还想捎点什么东西回去,毕竟这么多年漂泊在外,没有好好孝敬下老人,买点当地的特产回去,肯定是极好的。可是外边的生活压力是如此之大,每天除了上班还要加班,如果请假的话,不但工资要扣,还要花费不少的路费,这些钱加起来,估计都够老人在家里一年的用度了。想想不划算,于是又想到call这个函数,请它帮忙,顺道带回去是非常明智的选择,而且它不收费,不限量,不限重,有多少,带多少。我再次用代码来演示一下:

复制代码 代码如下:

  var frog = {
        name : 'frog',
        send  : function(money,food,milk,suagate){
            alert(money+food+milk+suagate);
        }
    }
    var rabbit = {
        name : 'rabbit'
    }
    frog.send.call(rubbit,'money','food','milk','suagate')

如果你有钱任性,甚至可以把iphone6 plus什么的也寄几个回去。.^_^.

说到这里call就差不多结束了,我也不知道上面的情景剧,是不是让你明白了call是怎么回事,如果只是勾起了你的思乡之情,那我表示抱歉。

call还有一个同父异母的兄弟,叫apply,如果弄明白了call的用法,那么apply其实也是一回事,唯一的区别呢,就是apply不喜欢传东西的时候,一个东西打一个包,显得很麻烦不说,还不环保。于是他就提供一个装东西的大箱子,你把你要传的东西全放在它提供的箱子里就好了。这个大箱子,就是一个数组。上面的例子,用apply来做的话,就是这样子的:

复制代码 代码如下:

var frog = {
        name : 'frog',
        send  : function(money,food,milk,suagate){
            alert(money+food+milk+suagate);
        }
    }
    var rabbit = {
        name : 'rabbit'
    }
                //注意参数的区别
    frog.send.apply(rubbit,['money','food','milk','suagate'])

以上就是apply,call的前世今生了。可是万万没想到,apply和call的爸爸,前些年搞房地产发了财,在外边还有一个叫bind 的私生子。虽然比call和apply这两个哥哥晚出道几年,但是能力也不容小视。只不过,他的身份,在某些地方,是不承认的。比如IE6。下面我还是用代码来演示下他的本领:

复制代码 代码如下:

    var name = 'rubbit';
    var frog = {
        name : 'frog',
        say : function(){
            setTimeout(function(money,milk){
                alert(this.name+money+milk)
            }.bind(this,'money','milk'),1000)
        }
    }
    frog.say();

通过对比发现,bind可以直接连在function(){}后面用。相当于把call 和 apply 都省了,直接在函数后面指定委托人和要传递的参数。从传参的风格上来说,更像call一些。

关于bind ,我们再来看一段经典的用法:

复制代码 代码如下:

var obj = {
    name : 'frog'
}
document.addEventListener('click',function(){
    alert(this.name); // frog
}.bind(obj),false);

总结一下,apply,call,bind,这三兄弟的相同点是:

 1. 第一个参数都是邦定作用域,即是在谁的地盘上做事。

 2. 都可以传递参数

不同点是:

  apply,call 兼容性更好,bind某些低版本的浏览器不支持。

  apply 传递的参数必须是用数组进行包装的,而 call 和 bind 则是将要传递的参数一一列出。

大家是否对call,apply,bind三个函数的用法有了更深入的认识了呢,希望本文能对大家有所帮助。

时间: 2024-10-21 15:32:56

javascript中call,apply,bind的用法对比分析_基础知识的相关文章

javascript中call,apply,bind的用法对比分析

 这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.     关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成"借用","请求".想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了

Javascript中的几种继承方式对比分析_基础知识

开篇从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究过javascript的继承方式,故特撰此文以供交流. 为何需要利用javascript实现继

JavaScript中的Math.LN2属性用法详解_基础知识

 这是一个欧拉常数和自然对数的基数,约为 2.718.语法: Math.E 示例: <html> <head> <title>JavaScript Math E Property</title> </head> <body> <script type="text/javascript"> var property_value = Math.E document.write("Property

JavaScript中的Repaint和Reflow用法详解_基础知识

你是不是经常听师兄或一些前端前辈说不能用CSS通配符 *,CSS选择器层叠不能超过三层,CSS尽量使用类选择器,书写HTML少使用table,结构要尽量简单-DOM树要小....等这些忠告,以前我就大概知道使用通配符或者CSS选择器层次过多可能会降低性能,至于为什么不使用table标签我一直是迷迷糊糊,也就跟着那样做了,但我认识了Repain和 Reflow之后,原来这些还真不能用太多. ok,希望这篇文章对你有帮助! 1.什么是Repaint/Reflow? 好,先上一张图:浏览器解析大概的工

javascript中call,apply,bind函数用法示例_javascript技巧

本文实例讲述了javascript中call,apply,bind函数用法.分享给大家供大家参考,具体如下: 一.call函数 a.call(b); 简单的理解:把a对象的方法应用到b对象上(a里如果有this,会指向b) call()的用法:用在函数上面 var Dog=function(){ this.name="汪星人"; this.shout=function(){ alert(this.name); } }; var Cat=function(){ this.name=&qu

javascript中有趣的反柯里化深入分析_基础知识

写在前面的话:国内对前端的研究在某些方面也不逊色于国外,这篇文章虽然看不太懂,但我很欣赏这种深入研究的精神! 反科里化的话题来自javascript之父Brendan Eich去年的一段twitter. 近几天研究了一下,觉得这个东东非常有意思,分享一下.先忘记它的名字,看下它能做什么. 不要小看这个功能,试想下,我们在写一个库的时候,时常会写这样的代码,拿webQQ的Jx库举例. 我们想要的,其实只是借用Array原型链上的一些函数.并没有必要去显式的构造一个新的函数来改变它们的参数并且重新运

javascript中的作用域和上下文使用简要概述_基础知识

javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性.每个函数有不同的变量上下文和作用域.这些概念是javascript中一些强大的设计模式的后盾.然而这也给开发人员带来很大困惑.下面全面揭示了javascript中的上下文和作用域的不同,以及各种设计模式如何使用他们. 上下文 vs 作用域 首先需要澄清的问题是上下文和作用域是不同的概念.多年来我注意到许多开发者经常将这两个术语混淆,错误的将一个描述为另一个.平心而论,这些术语

JavaScript中__proto__与prototype的关系深入理解_基础知识

这里讨论下对象的内部原型(__proto__)和构造器的原型(prototype)的关系. 一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) 复制代码 代码如下: Number.__proto__ === Function.prototype // true Boolean.__proto__ === Function.prototype // true String.__proto__ === Function.

Javascript中Date类型和Math类型详解_基础知识

Date类型 ECMASCript中的Date类型是在早期中Java中的java.util.Date类基础上构建的.为此Date类型使用自UTC(国际协调时间)1970年1月1日午夜(0时)开始经过的毫秒数来保存日期. 创建日期对象 1.创建当前日期.不需要传入参数 2.创建指定日期.需要传入参数,必须传入表示该日期的毫秒数(即从1970年1月1日午夜起至该日期止经过的毫秒数).为了简化这一计算过程,ECMAScript提供了两个方法:Date.parse()和Date.UTC(). var n