javascript中的call()
,apply()
,caller()
,callee()
方法作用都是调用某个函数或方法,概念和作用容易混淆,我自己也经常分不清楚什么时候该用哪种函数,这里总结一下,以免忘记。
为什么要用call()和apply()方法?
理清楚这几种方法的区别之前,我们先想想为什么要用call()和apply().
比如有段这样的函数:
function cat(){}
cat.prototype={
food:”fish”,
say: function(){
alert(“I love “+this.food);
}
}
var blackCat = new cat;
blackCat.say();
我们有一个对象whiteDog = {food:”bone”},我们不想对它重新定义say
方法,那么我们可以通过call或apply用blackCat的say方法:blackCat.say.call(whiteDog);
1、call()
call()标准api
fun.call(thisArg[, arg1[, arg2[, …]]])
call()
作用都是改变当前作用域,即改变this的指向,将函数对象从初始的上下文改变为由thisArg
指定的新对象。
thisArg
:可选项,将被当做当前对象。如果没有thisArg
,那么global对象将被用作thisArg
.
arg1,arg2
:可选项,将被传递方法参数序列。
call()应用demo
demo1
1
2
3
4
5
6
7
8
9
10
11
12
|
<input type=
"text" id=
"idTxt" value=
"input text">
var value =
"global var";
function mFunc(){
this.value =
"member var";
}
function gFunc(){
alert(
this.value);
}
window.gFunc();
gFunc.call(
window);
gFunc.call(
new mFunc());
gFunc.call(
document.getElementById(
'idTxt'));
|
demo2
1
2
3
4
5
6
7
8
9
|
var func =
new
function(){
this.a =
"func";
}
var func2 =
function(x){
var a =
"func2";
alert(
this.a);
alert(x);
}
func2.call(func,
"func2");
|
这个例子中,func调用的作用域是func,那么this指向func,this.a就等于func
,对于第二个alert(x),func2()的参数为func2,所以alert(x)=>’func2’
上面两个例子理解起来都不困难,再看下面这个例子:
demo3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var animals = [
{ species:
'Lion', name:
'King' },
{ species:
'Whale', name:
'Fail' }
];
for (
var i =
0; i < animals.length; i++) {
(
function(i) {
this.print =
function() {
console.log(
'#' + i +
' ' +
this.species
+
': ' +
this.name);
}
this.print();
}).call(animals[i], i);
}
|
这里面有个匿名函数,我们将给这个匿名函数加一个名字,下面这样改一下,会看得清楚一些:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var animals = [
{ species:
'Lion', name:
'King' },
{ species:
'Whale', name:
'Fail' }
];
for (
var i =
0; i < animals.length; i++) {
var callFunc =
function(i) {
this.print =
function() {
console.log(
'#' + i +
' ' +
this.species
+
': ' +
this.name);
}
this.print();
};
callFunc.call(animals[i], i)
}
|
callFunc()
当前作用域对象是animals[i]
,i
是callFunc()参数,将输出
=> #0 Lion: King
=> #1 Whale: Fail
2、apply()
apply()方法的作用与call()作用相同,都是改变当前作用域this指向。
apply()标准api
fun.apply(thisArg, [arg1,arg2,…argN])
从api上可以看出apply()区别于call()是第二个参数,apply()传入的是一个数组。
使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入,arguments是数组。
demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function Person(name,age)
{
this.name=name;
this.age=age;
}
function Student(name,age,grade)
{
Person.apply(
this,
arguments);
this.grade=grade;
}
var student=
new Student(
"zhangsan",
21,
"一年级");
alert(
"name:"+student.name+
"\n"+
"age:"+student.age+
"\n"+
"grade:"+student.grade);
|
3、caller()
caller返回一个对函数的引用,该函数调用了当前函数。
对于函数来说,caller 属性只有在函数执行时才有定义。 如果函数是由 Javascript 程序的顶层调用的,那么 caller 包含的就是 null 。
demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function callerDemo() {
if (
arguments.caller) {
var a = callerDemo.caller.toString();
alert(a);
}
else {
alert(
"this is a top function");
}
}
function handleCaller() {
callerDemo();
}
handleCaller();
function calleeDemo() {
alert(
arguments.callee);
}
calleeDemo();
|
4、callee()
返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文。
arguments.length是实参长度,arguments.callee.length是形参长度
demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function calleeDemo() {
alert(
arguments.callee);
}
function calleeLengthDemo(arg1, arg2) {
if (
arguments.length ==
arguments.callee.length) {
window.alert(
"验证形参和实参长度正确!");
return;
}
else {
alert(
"实参长度:" +
arguments.length);
alert(
"形参长度: " +
arguments.callee.length);
}
}
var sum =
function (n) {
if (n < =
0)
return
1;
else
return n +
arguments.callee(n -
1)
}
|