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实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
javascript操作表格排序实例分析
May 06 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
js实现简易计算器小功能
Nov 18 Javascript
vue3中provide && inject的使用
Jul 01 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继承的一个应用
2011/09/06 PHP
php防止sql注入的方法详解
2017/02/20 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
python 自定义对象的打印方法
2019/01/12 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
实习心得体会
2014/01/02 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
运动会800米加油稿
2014/02/22 职场文书
少年闰土教学反思
2014/02/22 职场文书
股指期货心得体会
2014/09/10 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2015年重阳节慰问信
2015/03/23 职场文书