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 select下拉框操作常用方法
Nov 09 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
记一次vue跨域的解决
Oct 21 Javascript
JS class语法糖的深入剖析
Jul 07 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
一个程序下载的管理程序(三)
2006/10/09 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
python实现简单的socket server实例
2015/04/29 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
python 基于opencv去除图片阴影
2021/01/26 Python
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
创业计划之特色精品店
2019/08/12 职场文书
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电