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 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 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实现mysql封装类示例
2014/05/07 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python简易远程控制单线程版
2018/06/20 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
python基于opencv检测程序运行效率
2019/12/28 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
keras中的History对象用法
2020/06/19 Python
Python运算符+与+=的方法实例
2021/02/18 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
高中体育教学反思
2014/01/29 职场文书
合伙经营协议书
2014/04/18 职场文书
十佳家长事迹材料
2014/08/26 职场文书
2014会计年终工作总结
2014/12/20 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang