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实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
这篇文章主要介绍了js实现首屏延迟加载实现方法,以及js实现多屏单张图片延迟加载效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-07-07
webpack3里使用uglifyjs压缩js时打包报错的解决
这篇文章主要介绍了webpack3里使用uglifyjs压缩js时打包报错的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-12-12
layui结合form,table的全选、反选v1.0示例讲解
今天小编就为大家分享一篇layui结合form,table的全选、反选v1.0示例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08


最新评论