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 相关文章推荐
intro.js 页面引导简单用法 分享
Aug 06 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
js实现碰撞检测
Jan 29 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
python实现微信打飞机游戏
2020/03/24 Python
python实现学生管理系统开发
2020/07/24 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
学期自我评价
2014/01/27 职场文书
七夕情人节促销方案
2014/06/07 职场文书
邓小平理论心得体会
2014/09/09 职场文书
高三语文复习计划
2015/01/19 职场文书
小学生交通安全寄语
2015/02/27 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
学校财务管理制度
2015/08/04 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python