javascript中arguments,callee,caller详解


Posted in Javascript onMarch 16, 2016

arguments是什么?

arguments是函数调用时,创建的一个类似的数组但又不是数组的对象,并且它存储的是实际传递给函数的参数,并不局限于函数声明的参数列表哦。

尼玛,什么意思?

写个demo看看,代码见下

<!DOCTYPE html>
  <head>
    <title>arguments</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <script>
      function obj(){
        //利用instanceof判断arguments
        console.log( 'arguments instanceof Array? ' + (arguments instanceof Array) );
        console.log( 'arguments instanceof Object? ' + (arguments instanceof Object) );
        console.log(arguments);
      }
      obj();
    </script>
  </body>
</html>

运行该代码,通过chrome调试器,可得下图

javascript中arguments,callee,caller详解

我利用instanceof判断arguments,从打印的效果看,arguments是一个对象。

然后展开打印出的arguments,可以从上图得知,它里面包括了许多属性,callee也在内。

接下来,我们修改上面的代码,在调用obj函数时,给它传递参数,但obj函数是没有参数的。

具体代码见下

<!DOCTYPE html>
  <head>
    <title>arguments</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <script>
      function obj(){
        console.log( 'arguments instanceof Array? ' + (arguments instanceof Array) );
        console.log( 'arguments instanceof Object? ' + (arguments instanceof Object) );
        console.log(arguments);
      }
      //向obj传递参数
      obj('monkey','love',24);
    </script>
  </body>
</html>

通过chrome调试器,可得下图

javascript中arguments,callee,caller详解

大家可以看见,arguments包含了三个我们给它传递的参数”monkey”,”love”,24。

所以说,为什么arguments是存储的实际传递给函数的参数呢,而不是函数声明的参数。

callee是什么?

callee是arguments对象的一个成员,它的值为“正被执行的Function对象”。

什么意思呢?

我们写个demo,看看输出结果就知道啦。

代码和结果图见下

<!DOCTYPE html>
  <head>
    <title>callee</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <script>
      function obj(){
        //利用callee
        console.log(arguments.callee);
      }
      obj();
    </script>
  </body>
</html>

从上面的图片可知,arguments.callee是指向参数arguments对象的函数,在这里就是obj咯。

javascript中arguments,callee,caller详解

caller是什么?

caller是函数对象的一个属性,该属性保存着调用当前函数的函数。

注意,是调用。不仅仅包含闭包哦。如果没有父函数,则为null。

还是老样子,我们一直来写个demo看看。

代码如下:

<!DOCTYPE html>
  <head>
    <title>caller</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <script>
      //child是parent内的函数,并在parent内执行child
      function parent(){
        function child(){
          //这里child的父函数就是parent
          console.log( child.caller );
        }
        child();
      }
      //parent1没有被别人调用
      function parent1(){
        //这里parent1没有父函数
        console.log(parent1.caller);
      }
      //parent2调用了child2
      function parent2(){
        child2();
      }
      function child2(){
        console.log(child2.caller);
      }
      /*执行
       parent里嵌套了child函数
       parent1没有嵌套函数
       parent2调用了child2,child2不是嵌套在parent2里的函数
      */
      parent();
      parent1();
      parent2();
    </script>
  </body>
</html>

打开chrome调试器,可得下效果图

javascript中arguments,callee,caller详解

结合代码和上图理解,这下理解了caller了么?

Javascript 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
求解开jscript.encode代码的asp函数
Feb 28 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
JS实现520 表白简单代码
May 21 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
深入浅析React中diff算法
May 19 Javascript
Bootstrap每天必学之滚动监听
Mar 16 #Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 #Javascript
Jquery技巧(必须掌握)
Mar 16 #Javascript
Javascript的表单验证长度
Mar 16 #Javascript
Uploadify上传文件方法
Mar 16 #Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 #Javascript
原生JS实现平滑回到顶部组件
Mar 16 #Javascript
You might like
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
浅谈vue权限管理实现及流程
2020/04/23 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
python实现的文件同步服务器实例
2015/06/02 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
解决python运行启动报错问题
2020/06/01 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
素质拓展感言
2014/01/29 职场文书
2014年维稳工作总结
2014/11/18 职场文书
python 实现的截屏工具
2021/05/08 Python