javascript中caller和callee详解

 更新时间:2015年08月10日 10:45:01   投稿:hebedich  
有些小伙伴可能会问caller,callee 是什么?在javascript 中有什么样的作用?那么本篇会对于此做一些基本介绍。希望能够对大家理解javascript中的callee与caller有所帮助。

最近学习javascript,碰到caller和callee的问题,去网上百度了很多。搜到的内容大同小益,整理总结了一下与大家分享。

caller:返回一个对调用function函数的函数的引用(用法:function.caller)

说明:对于函数来说,caller属性只有在函数执行时才有定义。如果函数由顶层调用,caller则为null。

var time = 3 //控制次数,去掉会一直在caller与handleCaller交替不断执行
function caller() {
  caller.caller()//返回调用caller函数的函数引用
}
function handleCaller() {
  if (time > 0){
    time--
    alert(handleCaller.caller)//返回调用handleCaller函数的函数引用
    alert(caller.caller)//返回调用caller函数的函数引用
    caller()
  }
}
handleCaller()

例子分析:第一次handleCaller运行的时候,两个alert返回的都是null,alert(handleCaller.caller)返回null是因为它是由顶层调用, alert(caller.caller)返回null是因为caller的默认值是null。接下去caller()函数被调用,caller.caller返回的是调用它的函数(handleCaller)的引用,通过caller.caller()可以再次调用handleCaller函数。第二次handleCaller运行的时候,alert(handleCaller.caller)返回的是caller代码(其实就是caller的引用),alert(caller.caller)返回的是handleCaller代码。因为函数之间的调用关系是handleCaller->caller->handleCaller。之后就不断在2个函数之间交替执行。

caller指向调用当前函数的函数,但是有一点,如果是在全局作用域内(即顶层window)被调用,则返回null。
代码走起

====================
function testCaller(){
if(testCaller.caller == null){
console.log('accessed at global');
}else{
console.log('accessed at ' + testCaller.caller);
}
}


在全局调用

testCaller(); // accessed at global

在一个函数中调用

function a(){
testCaller();
}
a(); // accessed at function a(){testCaller();} 

此时,testCaller.caller指向就是 function a

callee:返回相对应的arguments的函数引用。(多用于匿名函数递归)

说明:也许你在网上看到最多的是callee返回正在执行的函数引用。我是这么理解,每个函数都有一个自己的arguments,通常是用来存放参数的。arguments有一个callee 属性,初始值就是对应自身的函数引用。当你函数执行到该语句时,arguments是默认对应的是你现在执行的函数,那么arguments.callee为当前正在执行的函数的引用。当然如果你有标记过其他函数的arguments(例子中的args),自然可以用args.callee()去再次调用那个函数。

function a(){
  alert(arguments.callee)
  var args = arguments
  function c(){
    alert(arguments.callee)
    args.callee()
  }
  c()
}
a()

例子分析:例子中的arguments.callee都是默认返回当前正在执行的函数的引用(a中返回a自身函数引用,c中返回c自身函数引用),而通过用args存放a函数的arguments,在内置函数c中使用args.callee()再次调用a函数。

====================
function a(x){

if(x<=1)
return x;
else
return x + a(x-1);
}
a(12) // 78

这是一个极简的递归,运行结果正常。


再看看下面的调用方法

var b = a;
a = null; // 将a回收
b(12); // erro : 'a' is not a function



原因也简单,b=a,b=function a(){};在b调用之前,我们用了a=null。所以在 function a 运行的时候,其中的return x + a(x-1);中的a,指向的就是null,而不是 function a。
所以就报错了,如何解决这样的问题。我们将a换一种写法

function a(x){
if(x<=1)
return x;
else
return arguments.callee(x-1); // 这句是改变的地方
}

再调用

var b = a;
a = null;
b(12); // 78

原因:虽然我们将a=null了,但是函数a中并没有用到a,而是通过arguments.callee指向当前函数。
因为arguments.callee的定义就是:返回正在执行的函数。

相关文章

  • js以对象为索引的关联数组

    js以对象为索引的关联数组

    在代码逻辑中更多的是用关联数组的方式。但即使是这样我们也很少使用对象类型作为键值对的键名。
    2010-07-07
  • 原生js实现旋转木马效果

    原生js实现旋转木马效果

    这篇文章主要为大家详细介绍了原生js实现旋转木马效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • js判断手机端(Android手机还是iPhone手机)

    js判断手机端(Android手机还是iPhone手机)

    现在使用手机上网的人越来越多,一些下载网站会通过判断不同系统手机来访问不同网页,比如iPhone和Android。下面我们就来介绍一下如何用javascript判断iPhone或Android手机访问
    2015-07-07
  • 浅析JavaScript中的call、apply和bind方法

    浅析JavaScript中的call、apply和bind方法

    JavaScript中的call、apply和bind方法是用于改变函数执行上下文和预先设置参数的强大工具,它们在编写可维护和优雅的代码时起到了重要的作用,本文将介绍这些方法的原理和使用场景,并展示如何将它们应用于你的代码中,使其更加漂亮
    2023-06-06
  • json对象和formData相互转换的方式详解

    json对象和formData相互转换的方式详解

    我们有两种常见的传参方式: JSON 对象格式和 formData 格式,但是一些场景是需要我们对这两种数据格式进行转换的,这篇文章主要介绍了json对象和formData相互转换的方式详解,需要的朋友可以参考下
    2023-02-02
  • 深入理解JavaScript中的Base64编码字符串

    深入理解JavaScript中的Base64编码字符串

    在我们进行前端开发时,针对项目优化,常会提到一条:针对较小图片,合理使用Base64字符串替换内嵌,可以减少页面http请求。本文整理了一些Base64编码字符串的相关知识,感兴趣的可以了解一下
    2023-02-02
  • Javascript的console['''']常用输入方法汇总

    Javascript的console['''']常用输入方法汇总

    本文给大家带来了十几种Javascript的console['']常用输入方法,每种方法给大家介绍的都很详细,需要的朋友参考下吧
    2018-04-04
  • 屏蔽网页右键复制和ctrl+c复制的js代码

    屏蔽网页右键复制和ctrl+c复制的js代码

    解决的方法就是直接把网页保存下来然后删掉下面这段js代码,然后就可以正常用右键菜单,也可以通过设置浏览器的安全级别到最高级别来解决问题
    2013-01-01
  • 嵌入式iframe子页面与父页面js通信的方法

    嵌入式iframe子页面与父页面js通信的方法

    这篇文章主要介绍了嵌入式iframe子页面与父页面js通信的方法,实例分析了嵌入式iframe子页面与父页面js通信的常用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • 用js将内容复制到剪贴板兼容浏览器

    用js将内容复制到剪贴板兼容浏览器

    通过js将内容复制到剪贴板,本来不难,可是若考虑到浏览器的兼容性问题,就变的有点麻烦,借助flash实现浏览器的兼容
    2014-03-03

最新评论