Javascript中call和apply函数的比较和使用实例

一些简单的Javascript操作中较少会用到call和apply函数,在另外一些较大型的操作中,如web应用开发,js框架开发中可能会经常遇到这两个函数。关于这两个函数的解释,网上的资料也很多,但是本人认为很多资料要么照本宣科,要么高度雷同,缺少接地气的解释。接下来我试图用更加清晰简单的思路来分析解释这两个函数。

代码如下:

我们可以将call()和apply()看做是某个对象的方法,通过调用方法的实行来间接调用函数。call()和apply()的第一个实参是要调用函数的母对象,它是调用上下文,在函数体内通过this来获得对它的引用。要想对对象o的方法来调用函数f(), 可以这样使用call()和apply(): f.call(o) f.apply(o).[1]

先来分析一下call,这里有ECMAScript 3rd Edition对call函数的解释[2]:当call方法被一个function对象调用时(func.call(0)),需要传入一个必须的参数和若干个非必须的参数,它的执行过程是这样的:
a, 如果调用call的对象是不可运行的,抛出一个TypeError错误。
b, 设置参数列表为空
c, 如果被调用的方法传入不止一个参数,那么依次把arg1,arg2…插入到参数列表里
d, 返回调用call的函数结果,把调用函数(func)中的this用传入的参数1替换,把传入的参数列表当作这个函数的参数。
实际上,call函数是function对象的原型,也就是说,当调用call的函数必须也是个函数,当调用这个call时,把调用call的函数中的this用传入的对象替换就行了。下面有个例子:

<script>
 function C1(){
 this.name='张三';
 this.age='24';
 this.sayname=function(){
  console.log("这里是C1类,我的名字是:"+this.name+"我的年龄是"+this.age);
 }
 }
 function C2(){
 this.name='李四';
 this.age='25';
 }
 var c1=new C1();
 var c2=new C2();
 c1.sayname();
 c1.sayname.call(c2);
</script>

执行结果:
这里是C1类,我的名字是:张三我的年龄是24
这里是C1类,我的名字是:李四我的年龄是25
上面的代码中,声明了两个类,C1和C2,C1有两个属性,一个方法,C2也有两个和C1一样的属性,实例化之后,c1.sayname()打印出了实际属性,c1.sayname.call(c2)却打印除了c2的属性,为什么为这样?因为sayname()是个函数,并且函数体内有this,当call执行的之后,this就会被c2代替,所以,最终会打印出c2的属性。
apply和call的区别就在于可选参数的传递,apply的可选参数全部存放在一个数组当中,当成一个参数窜入而call是分成多个参数传入。
那么,apply和call函数有哪些应用呢?第一个是网络上比较经典的求数字数组中的最大元素,直接用Math.max.apply(null,array)即可,另外一个是可以用apply和call实现继承,如下:

<script>
 function Human(name,sex){
 this.name=name;
 this.sex=sex;
 this.walk=function(){
  console.log('我在走路');
 }
 }
 function Child(){
 Human.call(this,"小明","男")
 this.paly=function(){
  console.log('我很喜欢玩耍');
 }
 this.intruduce=function(){
  console.log('大家好,我是'+this.name);
 }
 }
 var jinp=new Human('Jack','男');
 var xiaoping=new Child();
 xiaoping.walk();
 xiaoping.paly();
 xiaoping.intruduce();
</script>

执行结果:
我在走路
我很喜欢玩耍
大家好,我是小明
与call()和apply()相似的函数是bind(), 它是在ECMAScript 5中新增的方法,但在ECMAScript 3中可以轻易的模拟bind()。bind函数一样也是Javascript中Function.prototype的方法,这个方法的主要内容是将函数绑定至某个对象。当函数f()上绑定bind()方法并传入一个对象o作为参数,这个方法将返回一个新的函数当作o的方法来调用。传入新函数的任何实参都将传入原始函数。如下:

<script>
 function introduce(country,hobby){
 return "大家好,我叫"+this.name+", 今年"+this.age+"岁, 来自"+country+", 喜欢"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 var jieshao=introduce.bind(xiaoming);
 console.log(jieshao("中国","打球"));
</script>

执行结果:
大家好,我叫小明, 今年20岁, 来自中国, 喜欢打球
上面的例子等效于:

<script>
 function introduce(country,hobby){
 return "大家好,我叫"+this.name+", 今年"+this.age+"岁, 来自"+country+", 喜欢"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 console.log(introduce.apply(xiaoming,["中国","打球"]));
    //或者下面这个
 console.log(introduce.call(xiaoming,"中国","打球"));
</script>

需要注意的是:在ECMAScript 5的严格模式中,call()和apply()的第一个实参都会变成this的值,哪怕传入的实参是原始值甚至是null或者undefined。在ECMAScript 3和非严格模式中,传入的null和undefined都会被全局对戏那个代替,而其他原始值会被相应的包装对象所替代。

参考资料

[1], Javascript权威指南第6版,189页
[2], Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] )
[3], Function.prototype.apply (thisArg, argArray)

(0)

相关推荐

  • javascript call和apply方法

    例子如下: 复制代码 代码如下: <script> /** *动物 */ function Animal(){ this.name='Amimal'; this.showName=function(){ alert(this.name); }; } /* *猫 */ function Cat(){ this.name='cat'; } var animal=new Animal;//创建动物对象 var cat=new Cat;//创建猫对象 animal.showName.call(cat,

  • JavaScript中的apply()方法和call()方法使用介绍

    1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组.call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来. 例1: 复制代码 代码如下: window.firstName = "diz"; window.lastName = "song"; var myObjec

  • Javascript中call和apply函数的比较和使用实例

    一些简单的Javascript操作中较少会用到call和apply函数,在另外一些较大型的操作中,如web应用开发,js框架开发中可能会经常遇到这两个函数.关于这两个函数的解释,网上的资料也很多,但是本人认为很多资料要么照本宣科,要么高度雷同,缺少接地气的解释.接下来我试图用更加清晰简单的思路来分析解释这两个函数. 复制代码 代码如下: 我们可以将call()和apply()看做是某个对象的方法,通过调用方法的实行来间接调用函数.call()和apply()的第一个实参是要调用函数的母对象,它是

  • javascript中call()、apply()的区别

    call().apply()的区别: 相同点: 1.call()和apply()都可以用来间接调用函数,都可以显式调用所需的this.即,任何函数可以作为任何对象的方法来调用. 2.两个方法都可以指定调用实参. 区别: call()和apply()的基本区别:在于将参数传递给函数. call():使用其自有的实参列表作为函数的参数: apply():要求以数组的形式传入参数. function track(o,m){ var original =o[m]; o[m] =function( ){

  • JavaScript中call和apply方法的区别实例分析

    本文实例分析了JavaScript中call和apply方法的区别.分享给大家供大家参考,具体如下: 这两个方法不经常用,但是在某些特殊场合中是非常有用的,下面主要说下它们的区别: 1.首先,JavaScript是一门面向对象的语言,也就是说它有this的概念.而且JavaScript是一门动态类型语言,为什么说它是动态类型语言呢?因为JavaScript在编译时没有类型检查的过程,不会去检查创建的对象类型,也不会去检查传递的参数类型,所以它的变量类型在运行期间是可以改变的. 2.要知道call

  • JS中call和apply函数用法实例分析

    本文实例讲述了JS中call和apply函数用法.分享给大家供大家参考,具体如下: call 函数 语法 obj.call(thisObj,arg[,arg2[,arg3[,...agr]]]); 简介 thisObj继承obj的属性和方法(obj原型链上的属性和方法不能被继承),后面的参数会当成obj的参数安装顺序传递进去. 示例 function animal(type,nickname){ this.type = type; this.nickname = nickname; this.s

  • JavaScript中call、apply、bind实现原理详解

    目录 前言 call 用法 实现 简单的实现版本: 升级版: apply 用法 实现 bind 用法 基本版: 升级版: 总结 前言 众所周知 call.apply.bind 的作用都是'改变'作用域,但是网上对这这'改变'说得含糊其辞,并未做详细说明,'改变'是直接替换作用域?谁替换谁?怎么产生效果?这些问题如果不理解清楚,就算看过手写实现,估计也记不长久 所以本文介绍了call.apply.bind的用法和他们各自的实现原理. call call() 方法使用一个指定的 this 值和单独给

  • JavaScript中重名的函数与对象示例详析

    前言 本文主要给大家介绍了关于JavaScript中重名的函数与对象的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. JavaScript 允许重复声明变量,后声明的覆盖之前的. var a = 1; var a = 'x'; console.log(a); //输出'x' JavaScript允许重复定义函数. JavaScript没有重载这个概念,它仅依据函数名来区分函数. 后定义的同名函数覆盖之前的,与参数无关. function test() { consol

  • 有关JavaScript中call()和apply() 的一些理解

    call()方法和apply()方法,在上层应用中用的不是很多,但在底层写JS框架的时候却常常看到.然后度娘谷哥一番,也发现好多达人写出了自己的理解和笔记,但始终还是云里雾里,于是去W3C学习了下 在W3C网上研究这两个方法的时候,看到一个词语,叫"对象冒充",这个概念本人觉得还是挺重要的,让我对这两个方法理解起来更加直观. call()方法,看下官方给出的例子 function sayColor(sPrefix,sSuffix) { alert(sPrefix + this.colo

  • JavaScript中常见内置函数用法示例

    本文实例讲述了JavaScript中常见内置函数用法.分享给大家供大家参考,具体如下: 一.介绍 在使用JavaScript语言时,除了可以自定义函数之外,还可以使用JavaScript的内置函数,这些内置函数是由JavaScript语言自身提供的函数. 二.一些常用的内置函数做详细介绍 1.parseInt()函数 该函数主要将首位为数字的字符串转化成数字,如果字符串不是以数字开头,那么将返回NaN. 语法: parseInt(StringNum,[n]) StringNum:需要转换为整型的

  • JavaScript中变量提升与函数提升经典实例分析

    本文实例讲述了JavaScript中变量提升与函数提升.分享给大家供大家参考,具体如下: 从两个实例说起: eg1: var i; console.log(i); // 2 eg2: console.log(i); // undefined var i = 2; 1.提升 变量和函数声明从它们在代码中出现的位置被提升到了最上面. 注意: 只有声明本身会被提升,而赋值操作不会被提升. 变量会提升到其所在函数的最上面,而不是整个程序的最上面. 函数声明会被提升,但函数表达式不会被提升: func1(

  • JavaScript中的惰性载入函数及优势

    定义 惰性载入函数表示函数执行的分支仅会发生一次,有两种实现惰性载入函数的方式,第一种是在函数被调用时再处理,在第一次调用中,该函数会覆盖为另外一个按合适方式执行的函数,这样任何对函数的调用都不用再经过执行的分支了.第二种实现惰性载入的方式是在声明函数时就制定适当的函数,这样,第一次调用函数时就不会损失性能了,而在代码首次加载时会损失一点儿性能. 功能 由于现在浏览器之间的差异,为了实现跨浏览器工作,很多函数要书写大量if语句或者try-catch-语句.当每次调用函数时,都要对每个if分支或t

随机推荐