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实现的分页函数
Dec 22 Javascript
innerText 使用示例
Jan 23 Javascript
JS清除选择内容的方法
Jan 29 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
微信小程序实现随机验证码功能
Dec 20 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
JavaScript实现动态生成表格
Aug 02 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
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
使用python绘制常用的图表
2016/08/27 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
keras输出预测值和真实值方式
2020/06/27 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
查环查孕证明
2014/01/10 职场文书
白血病募捐倡议书
2014/05/14 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
Go语言空白表示符_的实例用法
2021/07/04 Golang
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
php实现自动生成验证码的实例讲解
2021/11/17 PHP