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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
vue 自定义组件添加原生事件
Apr 21 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
解析php常用image图像函数集
2013/06/24 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
运动会解说词200字
2014/02/06 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
GPU服务器的多用户配置方法
2022/07/07 Servers