loading...

0

理解js中call,apply,caller,callee的区别

javascript读完大概需要11分钟

  • 发布时间:2018-01-22 11:10 星期一
  • 刘伟波
  • 189
  • 更新于2018-01-22 11:10 星期一

理解js中call,apply,caller,callee的区别

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(); //=>global var
gFunc.call(window); //=>global var
gFunc.call(new mFunc()); //=>member var
gFunc.call(document.getElementById('idTxt')); //=>input text

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); //=>'func'
alert(x); //=>'func2'
}
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)
{
//让Student()方法拥有(调用)Person()方法的属性
Person.apply(this,arguments); //=>等价于this.name = name;this.age = age;
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
//callee可以打印其本身
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)
}


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!