详解js中call与apply关键字的作用

所属分类: 网络编程 / JavaScript 阅读数: 873
收藏 0 赞 0 分享

javascript call与apply关键字的作用

apply接受两个参数。第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合。

call则是apply的语法糖,如果参数数量固定,则可以不用带下标的集合传第二个参数。

var func = function(a,b,c)
{
 alert(a + b + c);
}
func.apply(null,[1,2,3]);//弹出6
func.call(null,1,2,3);//弹出6

当apply与call传入的第一个参数为null时,函数体内的this会指向window。

当apply与call传入的第一个参数为null时,函数体内的this会指向window。

call与apply的用途

1、改变this的指向

var obj1 = {
 name = '刘备'
}
 
var obj2 = {
 name = '曹操'
}
var getName = function(){
 alert(this.name);
}
 
window.name = '三国';
getName();//弹出"三国"
getName.call(obj1);//弹出"刘备"
getName.call(obj2);//弹出"曹操"

所以,当在一些情况下this被莫名改变指向之后,可以使用call或apply来进行修正this的指向。

document.getElementById('div1').onclick = function(){
 alert(this.id);//div1
 var fun1 = function(){
  alert(this.id);//window.id 即undefined
 }
 fun1();//普通函数的方式调用,this指代window,相当于window.id 即 undefined
}

由于是普通函数的方式调用,所以上面的例子中,this已经变成了window。下面看看如何使用call进行修正。

document.getElementById('div1').onclick = function(){
 alert(this.id);
 var fun1 = function(){
  alert(this.id);
 }
 fun1.call(this);//强制函数内的this为外层的this,
}

2、调用其他对象的函数

示例1:

var obj1 = {
 a:1,
 b:2,
 add:function()
 {
  return this.a + this.b;
 }
}
var obj2 = {
 a:1,
 b:2,
}
var result = obj1.add.call(obj2);//用obj1的函数来计算obj2的两个属性的和
alert(result);//输出3

示例2:借用构造函数实现类似继承的效果

var A = function(name)
{
 this.name = name;
};
var B = function(){
 A.apply(this,arguments)
}
B.prototype.getName = function(){
 return this.name;
}
var b = new B('刘备');
alert(b.getName());

以上就是本文的内容,有问题可以和小编联系,谢谢对脚本之家的支持!

更多精彩内容其他人还在看

Canvas实现放射线动画效果

本文主要分享了Canvas实现放射线动画的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

微信小程序 image组件binderror使用例子与js中的onerror区别

这篇文章主要介绍了微信小程序 image组件binderror使用例子与js中的onerror区别的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js轮播(仿慕课网)

本文主要分享了原生js实现仿慕课网的轮播效果。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

Bootstrap table简单使用总结

这篇文章主要为大家总结了Bootstrap table的简单使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

微信小程序之MaterialDesign--input组件详解

本篇文章主要介绍了微信小程序之MaterialDesign--input组件详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
收藏 0 赞 0 分享

浅析javaScript中的浅拷贝和深拷贝

本篇文章主要介绍了浅析javaScript中的浅拷贝和深拷贝,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js时间戳和c#时间戳互转方法(推荐)

下面小编就为大家带来一篇js时间戳和c#时间戳互转方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Bootstrap模态框使用详解

这篇文章主要为大家详细介绍了Bootstrap模态框的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Jil,高效的json序列化和反序列化库

下面小编就为大家带来一篇Jil,高效的json序列化和反序列化库。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

BootStrap实现带关闭按钮功能

这篇文章主要介绍了BootStrap实现带关闭按钮功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多