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 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
antd form表单数据回显操作
Nov 02 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使用递归计算文件夹大小
2014/12/24 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python文件操作基本流程代码实例
2017/12/11 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
python实现xml转json文件的示例代码
2020/12/30 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
文员岗位职责范本
2014/03/08 职场文书
给学校的建议书
2014/03/12 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
语文课外活动总结
2014/08/27 职场文书
低碳环保演讲稿
2014/08/28 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
批评与自我批评总结
2014/10/17 职场文书
小学教师岗位职责
2015/04/02 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL