JavaScript中callee和caller的区别与用法实例分析

 更新时间:2019年06月28日 09:53:51   作者:Yeoman92  
这篇文章主要介绍了JavaScript中callee和caller的区别与用法,结合实例形式分析了javascript中callee和caller的功能、区别、用法及操作注意事项,需要的朋友可以参考下

本文实例讲述了JavaScript中callee和caller的区别与用法。分享给大家供大家参考,具体如下:

1.callee

在函数的内部,有两个特殊的对象:arguments和this。其中arguments是一个类似数组的对象,包含着传入函数的所有参数。

虽然arguments的主要用途是保存函数参数,但这个对象有一个属性——callee,该属性是一个指针,指向拥有这个arguments对象的函数

所以callee的作用就是来指向当前对象

看一个阶层函数的例子就会明白他的用途了:

/*
 * 普通的递归阶层函数
 */
function factorial(num){
  if(num <= 1){
    return 1;
  }else{
    return num *factorial(num-1);
  }
}

上面的代码运行没有问题,但这个函数的执行与函数名factorial紧紧耦合在一起了,要是改变了函数名,里面的函数名也要随着改变,这样很不方便,所以我们用arguments.callee来消除这种耦合。

//使用callee属性的递归阶层函数
function factorial1(num){
  if(num <= 1){
    return 1;
  }else{
    return num * arguments.callee(num-1);
  }
}

根据callee的定义,callee是arguments对象的一个属性,指向拥有arguments对象的函数,这个函数就是factorial1 (factorial1=arguments.callee),他们指向的都是上面的递归函数。请记住函数的名字仅仅是一个包含指针的变量而已。

2.caller

caller是函数对象的一个属性,该属性保存着调用当前函数的函数的引用(指向当前函数的直接父函数)

返回一个对函数的引用,该函数调用了当前函数。

function a(){//父函数
  b();
};
function b(){
  console.info(b.caller);
};
a(); //结果就是弹出函数a和内容

可以看到函数b的属性caller调用当前函数b的函数引用a(就是指向当前函数b的父函数a)

3.将callee和caller结合起来使用

function b(){
  alert(b.caller);
};

从这个代码可以看出b函数中调用了b函数名,这样当函数名改变时就很不方便,我们需要替换里面的那个b

前面我们知道用什么方法可以指向当前对象,下面我们就来修改一下:

(function a(){
  b();
})();
function b(){
  alert(arguments.callee.caller);//用arguments.callee代替了b
};

4.实例:斐波那契数列(用递归思想)

如果一对兔子每月生一对兔子;一对新生兔,从第二个月起就开始生兔子;假定每对兔子都是一雌一雄,试问一对兔子,第n个月能繁殖成多少对兔子?(使用callee完成)

var result=[];
function fn(n){
  if(n==1){
    return 1;
  }else if(n==2){
    return 1;
  }else {
    if(result[n]){
      return result[n];
    }else{
      //arguments.callee(...)=fn(...)
      result[n]=arguments.callee(n-1)+arguments.callee(n-2);
      return result[n];
    }
  }
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • uni-app自定义导航栏右侧做增加按钮并跳转链接功能

    uni-app自定义导航栏右侧做增加按钮并跳转链接功能

    这篇文章主要介绍了uni-app自定义导航栏右侧做增加按钮并跳转链接,本文通过实例代码给大家分享实现思路,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • 结合 ES6 类编写JavaScript 创建型模式

    结合 ES6 类编写JavaScript 创建型模式

    这篇文章主要介绍了结合ES6类编写JavaScript创建型模式,本文开始系统性的对20多种JavaScript 设计模式进行简单概述,然后结合ES6类的方式来编写实例代码展示其使用方式,需要的朋友可以参考一下
    2022-07-07
  • textarea 控制输入字符字节数(示例代码)

    textarea 控制输入字符字节数(示例代码)

    本篇文章主要是对textarea 控制输入字符字节数的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JS中ESModule和commonjs介绍及使用区别

    JS中ESModule和commonjs介绍及使用区别

    这篇文章主要介绍了JS中ESModule和commonjs介绍及使用区别,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-07-07
  • 类似CSDN图片切换效果脚本

    类似CSDN图片切换效果脚本

    原来的脚本当只有一张图片时会弹出JavaScript脚本错误,特此将自己修改完的版本贴出。
    2009-09-09
  • JavaScript中的简写语法分享

    JavaScript中的简写语法分享

    这篇文章主要为大家整理了12个JavaScript中常用的简写语法技巧,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以收藏一下
    2023-04-04
  • bootstrap suggest搜索建议插件使用详解

    bootstrap suggest搜索建议插件使用详解

    这篇文章主要为大家详细介绍了bootstrap suggest搜索建议插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • javascript insertAfter()定义与用法示例

    javascript insertAfter()定义与用法示例

    这篇文章主要介绍了javascript insertAfter()定义与用法,实例分析了javascript节点后插入元素的实现与使用方法,需要的朋友可以参考下
    2016-07-07
  • es6学习笔记之Async函数基本教程

    es6学习笔记之Async函数基本教程

    这篇文章主要给大家介绍了关于es6中Async函数的基本教程,文中介绍的非常详细,对大家学习async函数具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧。
    2017-05-05
  • js编写贪吃蛇的小游戏

    js编写贪吃蛇的小游戏

    本文为大家介绍的是使用JS写的贪吃蛇游戏,个人练习之用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望对大家学习js有所帮助
    2015-12-12

最新评论