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 相关文章推荐
JS 显示当前日期与时间的代码
Mar 24 Javascript
基于jquery的气泡提示效果
May 31 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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版
2006/10/09 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
django初始化数据库的实例
2018/05/27 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
质量工程师岗位职责
2013/11/16 职场文书
马智宇结婚主持词
2014/04/01 职场文书
宣传标语大全
2014/07/01 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python