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 相关文章推荐
Javascript算符的优先级介绍
Mar 20 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
Javascript的比较汇总
Jul 25 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
jquery实现提示语淡入效果
May 05 jQuery
vue实现验证码按钮倒计时功能
Apr 10 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JavaScript交换两个变量方法实例
Nov 25 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
js实现简单放大镜效果
Mar 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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
动态添加js事件实现代码
2009/03/12 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
javascript轮播图算法
2016/10/21 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
python中的django是做什么的
2020/07/31 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
html5 input属性使用示例
2013/06/28 HTML / CSS
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
行政办公员自我评价分享
2013/12/14 职场文书
预防煤气中毒方案
2014/06/16 职场文书
财务检查整改报告
2014/11/06 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
单位实习鉴定评语
2015/01/04 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
农业项目合作意向书
2015/05/08 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle
create-react-app开发常用配置教程
2022/06/25 Javascript