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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
原生js实现自定义滚动条组件
Jan 20 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
新闻分类录入、显示系统
2006/10/09 PHP
PHP安全配置
2006/12/06 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
基于vue实现分页效果
2017/11/06 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
python计算圆周率pi的方法
2015/07/11 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
电子商务专业学生的学习自我评价
2013/10/27 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
公积金接收函格式
2015/01/30 职场文书
邀请函模板
2015/02/02 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
Go语言怎么使用变长参数函数
2022/07/15 Golang