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中Ajax 缓存带来的影响的解决方法
May 19 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
JavaScript中import用法总结
Jan 20 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 pack与unpack 摸板字符字符含义
2009/10/29 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
PHP学习笔记之session
2018/05/06 PHP
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Python中的random()方法的使用介绍
2015/05/15 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python3爬虫全国地址信息
2019/01/05 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
Python colormap库的安装和使用详情
2020/10/06 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
Bootstrap 学习分享
2012/11/12 HTML / CSS
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP