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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
jquery.validate使用详解
Jun 02 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
通过实例解析vuejs如何实现调试代码
Jul 16 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图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
php批量删除操作代码分享
2017/02/26 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python对文件的操作方法汇总
2020/02/28 Python
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
类如何去实现接口
2013/12/19 面试题
以幸福为主题的活动方案
2014/08/22 职场文书
计划生育证明格式范本
2014/09/12 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
python_tkinter弹出对话框创建
2022/03/20 Python