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跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
Angular排序实例详解
Jun 28 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 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中使用模板的方法
2008/05/24 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
python剪切视频与合并视频的实现
2020/03/03 Python
python判断变量是否为列表的方法
2020/09/17 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
学校七一活动方案
2014/01/19 职场文书
三好学生事迹材料
2014/12/24 职场文书
党员带头倡议书
2015/04/29 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python