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 相关文章推荐
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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
快速配置PHPMyAdmin方法
2008/06/05 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
用js实现trim()的解决办法
2013/04/16 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
实例讲解Vue.js中router传参
2018/04/22 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
Python KMeans聚类问题分析
2018/02/23 Python
Python交互环境下实现输入代码
2018/06/22 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
python SocketServer源码深入解读
2019/09/17 Python
幼教简历自我评价
2014/01/28 职场文书
家长对老师的评语
2014/04/18 职场文书
协会周年庆活动方案
2014/08/26 职场文书
周一问候语大全
2015/11/10 职场文书
大学班干部竞选稿
2015/11/20 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
Python循环之while无限迭代
2022/04/30 Python