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 代码压缩工具小结
Feb 27 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
如何提高Dom访问速度
Jan 05 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 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
php中使用redis队列操作实例代码
2013/02/07 PHP
php中filter_input函数用法分析
2014/11/15 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
PHP错误处理函数
2016/04/03 PHP
实现js保留小数点后N位的代码
2014/11/13 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
python+Django+apache的配置方法详解
2016/06/01 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
python破解zip加密文件的方法
2018/05/31 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
python 字典套字典或列表的示例
2019/12/16 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
全国税务系统先进集体事迹材料
2014/05/19 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
婚前协议书标准版
2014/10/19 职场文书
停电通知范文
2015/04/16 职场文书
小学班主任教育随笔
2015/08/15 职场文书
大学班长竞选稿
2015/11/20 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers