javascript中call和apply方法浅谈
更新时间：2013年09月27日 15:27:59 作者：
我们可以将call和apply看做是某个对象的方法，通过调用方法的形式来间接调用函数
call和apply的第一个实参是要调用函数的母对象，它是调用上下文，在函数体内通过this来获得对它的引用。
例如，如果要想以对象o的方法来调用函数f，可以按如下的方式使用call和apply方法：
f.call(o);
f.apply(o);
可以按如下的代码来理解：
o.m = f; //将f存储为o的临时方法
o.m(); //调用这个临时方法
delete o.m; //将这个临时方法删除
来个示例吧。
function testFun(){
return this.a + this.b;
}
var o = {a:1, b:2};
testFun.call(o); //3
testFun.apply(o); //3
上述代码执行的结果均为3，可以理解为return o.a + o.b。
考虑一个问题，如果call和apply方法的第一个实参为null或者undefined为怎样？来看下面的一个例子：
var a = 10, b = 20;
function testFun(){
return this.a + this.b;
}
testFun.call();
testFun.apply();
上述代码执行的结果均为30。这是因为call和apply的第一个实参如果传入的是null或者undefined，则会被全局对象代替。
那call和apply这两个方法有什么区别呢？
对于call方法来说，第一个调用上下文实参之后的所有实参就是要传入待调用函数的值。比如，以对象o的方法的形式调用函数f，并传入两个参数，就可以使用如下的代码：
f.call(o, 1, 2);
而apply方法则将第一个实参之后的所有实参放入一个数组内，
f.apply(o, [1, 2]);
来个例子吧
function testFun(x, y){
return this.a + this.b + x + y;
}
var o = {a:1, b:2};
testFun.call(o, 10, 20);
testFun.apply(o, [10, 20]);
上述代码的执行结果为33，可以理解为 return o.a + o.b + 10 + 20
例如，如果要想以对象o的方法来调用函数f，可以按如下的方式使用call和apply方法：
复制代码 代码如下:
f.call(o);
f.apply(o);
可以按如下的代码来理解：
复制代码 代码如下:
o.m = f; //将f存储为o的临时方法
o.m(); //调用这个临时方法
delete o.m; //将这个临时方法删除
来个示例吧。
复制代码 代码如下:
function testFun(){
return this.a + this.b;
}
var o = {a:1, b:2};
testFun.call(o); //3
testFun.apply(o); //3
上述代码执行的结果均为3，可以理解为return o.a + o.b。
考虑一个问题，如果call和apply方法的第一个实参为null或者undefined为怎样？来看下面的一个例子：
复制代码 代码如下:
var a = 10, b = 20;
function testFun(){
return this.a + this.b;
}
testFun.call();
testFun.apply();
上述代码执行的结果均为30。这是因为call和apply的第一个实参如果传入的是null或者undefined，则会被全局对象代替。
那call和apply这两个方法有什么区别呢？
对于call方法来说，第一个调用上下文实参之后的所有实参就是要传入待调用函数的值。比如，以对象o的方法的形式调用函数f，并传入两个参数，就可以使用如下的代码：
复制代码 代码如下:
f.call(o, 1, 2);
而apply方法则将第一个实参之后的所有实参放入一个数组内，
复制代码 代码如下:
f.apply(o, [1, 2]);
来个例子吧
复制代码 代码如下:
function testFun(x, y){
return this.a + this.b + x + y;
}
var o = {a:1, b:2};
testFun.call(o, 10, 20);
testFun.apply(o, [10, 20]);
上述代码的执行结果为33，可以理解为 return o.a + o.b + 10 + 20
相关文章
本篇文章主要是对js 判断控件获得焦点的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
近期在做项目的时候,遇到了一些JS浮点数精度的问题,这个问题其实说大不大,说小不小,下面这篇文章主要给大家介绍了关于js运算精度丢失的2个解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了客户端验证用户名和密码 的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
本篇文章给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例，有需要的朋友学习测试下吧。2017-12-12
这篇文章主要为大家详细介绍了js制作轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
Javascript的表单验证-揭开正则表达式的面纱在本文重点介绍，感兴趣的朋友一起学习吧2016-03-03
下面小编就为大家带来一篇js 实现数值的千分位及保存小数方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
利用js异或算法实现脚本加解密的代码2008-02-02![完美解决input[type=number]无法显示非数字字符的问题](//img.jbzj.com/images/xgimg/bcimg8.png)
完美解决input[type=number]无法显示非数字字符的问题
下面小编就为大家带来一篇完美解决input[type=number]无法显示非数字字符的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
Foo.getName算是一道比较老的面试题了,大致百度了一下在17年就有相关文章在介绍它,下面这篇文章主要给大家介绍了关于一道超经典js面试题Foo.getName()的相关资料,需要的朋友可以参考下2022-03-03
![完美解决input[type=number]无法显示非数字字符的问题](http://img.jbzj.com/images/xgimg/bcimg8.png)
最新评论