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 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
JavaScript实现网页计算器功能
Oct 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
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
python列表与元组详解实例
2013/11/01 Python
python中MySQLdb模块用法实例
2014/11/10 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
python实现坦克大战
2020/04/24 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
餐饮部总监岗位职责范文
2014/02/13 职场文书
致800米运动员广播稿
2014/02/16 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
小学班主任事迹材料
2014/12/17 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
网络营销计划
2015/01/17 职场文书
售后服务承诺函格式
2015/01/21 职场文书
Nginx 匹配方式
2022/05/15 Servers
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers