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 相关文章推荐
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 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异步执行的详解
2013/06/03 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
CI框架附属类用法分析
2018/12/26 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
python实现弹跳小球
2019/05/13 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
python web框架中实现原生分页
2019/09/08 Python
python定时任务 sched模块用法实例
2019/11/04 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
汽车4S店销售经理岗位职责
2015/04/02 职场文书
项目战略合作意向书
2015/05/08 职场文书
党支部评议意见
2015/06/02 职场文书
2015年教师节感言
2015/08/03 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Go语言基础函数基本用法及示例详解
2021/11/17 Golang