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 相关文章推荐
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
jQuery实现大图轮播
Feb 13 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 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
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Linux中Python 环境软件包安装步骤
2016/03/31 Python
pandas对指定列进行填充的方法
2018/04/11 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
python中取绝对值简单方法总结
2020/07/24 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
公司承诺书格式
2014/05/21 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
个人年终总结结尾
2015/03/06 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL