我是靠谱客的博主 快乐白昼,这篇文章主要介绍理解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);
}//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力
}
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
13
<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
10
var func = new function(){ this.a = "func"; } var func2 = function(x){ var a = "func2"; alert(this.a); //=>'func' alert(x); //=>'func2' }//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力 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); }//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力 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
18
/*定义一个人类*/ function Person(name,age) { this.name=name; this.age=age; } /*定义一个学生类*/ function Student(name,age,grade) {//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力 //让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
17
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); }//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力 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
22
//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) }

结语

感谢您的观看,如有不足之处,欢迎批评指正。
获取资料???
本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:???619586920???,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

最后

以上就是快乐白昼最近收集整理的关于理解js中call,apply,caller,callee的区别的全部内容,更多相关理解js中call,apply,caller,callee内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(87)

评论列表共有 0 条评论

立即
投稿
返回
顶部