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点击自以外任意处,关闭自身的代码
Feb 10 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
js中如何完美的解析数据
Mar 18 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 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 采集程序原理分析篇
2010/03/05 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
详解python基础之while循环及if判断
2017/08/24 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
基于python plotly交互式图表大全
2019/12/07 Python
高级文秘工作总结的自我评价
2013/09/28 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
个人公开承诺书
2014/03/28 职场文书
秘书英文求职信
2014/04/16 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
庆元旦演讲稿
2014/09/15 职场文书
个人作风建设心得体会
2014/10/22 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2014年统计工作总结
2014/11/21 职场文书
大学毕业晚会开场白
2015/05/29 职场文书