js中arguments对象的深入理解


Posted in Javascript onMay 14, 2019

前言

在JavaScript中,arguments属于当前对象的一个内置属性,arguments非常类似于Array对象,但是又不是实例的Array。本文主要给大家介绍了关于js中arguments对象的相关内容,下面话不多说了,来一起看看详细的介绍吧

一、在函数调用的时候,浏览器每次都会传递进两个隐式参数

  • 函数的上下文对象this
  • 封装实参的对象arguments

二、arguments 对象

  • arguments 对象实际上是所在函数的一个内置类数组对象
  • 每个函数都有一个arguments属性,表示函数的实参集合,这里的实参是重点,就是执行函数时实际传入的参数的集合。arguments不是数组而是一个对象,但它和数组很相似,所以通常称为类数组对象,以后看到类数组其实就表示arguments。arguments对象不能显式的创建,它只有在函数开始时才可用。
  • arguments还有属性callee,length和迭代器Symbol。
  • arguments同样具有length属性,arguments.length 为函数实参个数,可以用arguments[length]显示调用参数
  • arguments对象可以检测参数个数,模拟函数重载

三、理解点

第一点:arguments对象:可以在函数内访问所有的参数,实参

    实例代码:

function f1(){
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
 }

 f1(12,23,45); //12 34 45

第二点:在正常的模式下,arguments对象可以在运行的时候进行修改

    实例代码:

function f2(a,b){
  arguments[0] = 10;
  arguments[1] = 20;
  return a + b;
 }

 console.log(f2(4,6)); //30

第三点:在严格的模式下,arguments对象在运行的时候不可以修改,修改arguments对象不会影响到实际的函数参数

    注意:  'use strict' 是开启严格模式

    实例代码:

function f3(a,b){
  'use strict';
  arguments[0] = 10;
  arguments[1] = 20;
  return a + b;
 }

 console.log(f3(3,6)); //9

第四点:通过arguments对象的length属性,可以判断实参的个数

    实例代码:

function f4(){
  console.log(arguments.length);
 }

 f4(2,3,4,5); //4
 f4(1);  //1
 f4();  //0

第五点:arguments是一个对象,不是数组,转换为数组可以采用 slice 和 逐一填入新数组

    实例代码:

var arr = Array.prototype.slice.call(arguments);
  console.log(typeof arr);

  var arr2 = [];
  for(var i = 0; i<arguments.length;i++){
   arr2.push(arguments[i]);
  }
  console.log(typeof arr2);

第六点:arguments的callee属性可以返回对应的原函数,达到调用自身函数的效果,但是在严格模式中是不适用的

    实例代码:

var f5 = function(){
   console.log(arguments.callee===f5); //true
   console.log(arguments.callee===f6); //false
  }
  
  var f6;
  f5(); //返回原函数,调用自身

四、arguments的应用

第一点:arguments.callee为引用函数自身。我们可以借用arguments.length可以来查看实参和形参的个数是否一致

    实例代码:

function add(a, b) { 

 var realLen = arguments.length; 
 console.log("realLen:", arguments.length); 
 var len = add.length; 
 console.log("len:", add.length); 

 if (realLen == len) { 
 console.log('实参和形参个数一致'); 
 } else { 
 console.log('实参和形参个数不一致'); 
 } 

}; 

add(11,22,33,44,66);

第二点:我们可以借用arguments.callee来让匿名函数实现递归

    实例代码:

var sum = function(n) { 

 if(n == 1) { 
  return 1; 
 } else { 
  return n + arguments.callee(n-1); 
  } 
 } 

console.log("sum =", sum(5));

第三点:编写一个函数求传入的若干个数字(不能用数组显示传入)的和

    实例代码:

function add() { 

var len = arguments.length; 
var sum = 0; 

for (var i = 0; i < len; ++i) { 
  sum += arguments[i]; 
} 
return sum; 
}; 

add(11,22,33,44,66);

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
jsPDF导出pdf示例
May 02 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
ios中视频的最后一桢问题解决
May 14 #Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 #Javascript
vue项目中引入vue-datepicker插件的详解
May 14 #Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
JavaScript中this的全面解析及常见实例
May 14 #Javascript
jquery 验证用户名是否重复代码实例
May 14 #jQuery
记录vue项目中遇到的一点小问题
May 14 #Javascript
You might like
根德YB400的电路分析
2021/03/02 无线电
第1次亲密接触PHP5(1)
2006/10/09 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
关于Python作用域自学总结
2019/06/10 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
创业计划书中包含的9个方面
2013/12/26 职场文书
社会保险接收函
2014/01/12 职场文书
大学生自我鉴定书
2014/03/24 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
六五普法心得体会2016
2016/01/21 职场文书
Python中的 enumerate和zip详情
2022/05/30 Python