apply接受两个参数。第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合。
call则是apply的语法糖,如果参数数量固定,则可以不用带下标的集合传第二个参数。
1
2
3
4
5
6
|
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。
call与apply的用途
1、改变this的指向
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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的指向。
1
2
3
4
5
6
7
|
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进行修正。
1
2
3
4
5
6
7
|
document.getElementById(
'div1'
).onclick =
function
(){
alert(
this
.id);
var
fun1 =
function
(){
alert(
this
.id);
}
fun1.call(
this
);
//强制函数内的this为外层的this,
}
|
2、调用其他对象的函数
示例1:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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:借用构造函数实现类似继承的效果
1
2
3
4
5
6
7
8
9
10
11
12
|
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());
|